javascript - 在动态 form.submit() 之后应用 CSS

Question

我的页面中有一个隐藏的 iFrame。然后从javascript，我正在构建一个表单并提交。我将 form.target 设置为 iframe，以便它加载到那里。

<iframe name="myIframe" id="myIframe"></iframe> 

这是使用 css display:none 隐藏的

我的JS是这样的:

const form = document.createElement('form');
const actionUrl = 'http://example.com/';
 form.method = 'post';
 form.action = actionUrl;
 form.target="myIframe";
 //append input fields - leaving out hat loop
 document.body.appendChild(form);
 document.getElementById('myIframe').style.display = "block";
 form.submit();

<iframe name="myIframe" id="myIframe"></iframe> 

整个过程如我所料。但是由于 display:block 在提交之前，iframe 在其内容出现前一秒出现。有什么办法可以在 form.submit() 之后设置 IFrame 显示属性

Answer 1

一个简单的解决方案是设置 <iframe/> 的内联样式确保 iframe 在初始绘制期间立即隐藏:

<iframe name="myIframe" id="myIframe" style="display:none;"></iframe>

然而，通常不推荐像这样设置内联样式 - 首选的样式设置方法是通过 CSS，在您的情况下，可以通过将 HTML 更新为此来实现:

<style>
    #myIframe {
        display:none;
    }
</style>
<iframe name="myIframe" id="myIframe"></iframe>

任何一种方法都应该使用您当前的 JavaScript 产生所需的结果。