javascript - 打开 iframe 并折叠整个页面

Question

用户提交表单后，我希望 iframe 打开并覆盖全屏。正常内容会折叠，因此只能看到 iframed 内容。这是怎么做的。只需打开 iframe 就会将所有内容留在其上方和下方。

<div id="iWait" style="display:none;"><center><iframe src="http://website.com" width="100%" height="100%"></iframe></center></div>

Answer 1

请注意，在代码中定义 iframe 会导致它在后台加载。如果稍后才需要加载页面，这可能会不必要地减慢页面速度。

从这样的 HTML 开始（注意fixed定位）：

<iframe id="preventBoredom" src="http://www.domain.com/" frameborder="0" style="position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; display: none;"></iframe>

然后，.show()像这样揭示它：

$('#preventBoredom').show();

如果您只想在 iframe 显示时加载它，请将初始 iframe 设置src为空白 HTML 页面，并改用此 jQuery：

$('#preventBoredom').src('http://www.domain.com/').show();

---

在回复@ROY_Finley 和@Mort_Goldman 时请注意：我无法想象使用它的好情况，除非您打算在某个时候再次隐藏 iframe。例如，您可能希望在加载航空公司搜索结果集时让用户保持忙碌（这些通常需要一段时间才能加载）。但是这种方法会让用户认为他们在另一个站点上——如果窗口突然被核爆，他们会很生气。

如果表单处理是一个缓慢的服务器任务，您应该在继续处理之前让处理脚本关闭输出。这将允许服务器在浏览器正常运行时在后台完成其工作。