时间戳

首页 > 解决方案 > 在动态 form.submit() 之后应用 CSS

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

问题描述

我的页面中有一个 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 显示属性

标签： javascriptjquerycss

解决方案

一个简单的解决方案是设置内联样式<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 产生所需的结果。

推荐阅读