模式对话框的 iframe 与 innerHTML - 哪个更好？

Posted 2023-05-07

【中文标题】模式对话框的 iframe 与 innerHTML - 哪个更好？

【英文标题】：iframe vs innerHTML for a modal dialog - which is better?

【发布时间】：2012-09-15 06:06:31

【问题描述】：

我在我的 html5 页面上模拟模态窗口功能，方法是创建一个带有 position: fixed 的 div，在浏览器窗口中居中等。在某些情况下，我的模态窗口只显示带有一个或多个按钮的消息，例如 @987654322 @Cancel，但在其他情况下，我会展示更复杂的表格，例如即时消息对话框。

问题是针对更复杂的情况。那么哪个更好，（1）在我的“模态”窗口中有一个<iframe>，或者（2）一个<div>加上一些Ajax代码来检索我的表单内容并将其注入到div的innerHTML中？

在这两种情况下有哪些注意事项？当你选择一个而不是另一个时，你的理由是什么？

浏览器要求：IE9+ 和其他正常浏览器。

【问题讨论】：

两者都可以，各有利弊。就个人而言，我倾向于使用基于 div 的解决方案，因为 div 可以很好地自动调整大小，而 iframe 需要更多的工作。

@Jeremy J Starcher 自动调整大小是一个很好的观点，谢谢。另外，我会提到样式表和外部脚本/库 - iframe 需要从 iframe 页面中加载所有外部文件。

【参考方案1】：

仅当您确实需要iframe 时才应使用iframe。使用 iframe 的原因是：

从另一个域加载内容的最简单方法。 将内容的安全上下文与单独的域隔离。 在您的网页中嵌入完全独立的网页（独立脚本、独立样式表等）。 您不想编写 ajax 代码来动态加载内容，而只想使用 iframe 的内置 .src 功能。

如果您不需要 iframe 的任何这些功能，那么使用 div（它会自动调整其内容的大小 - 而 iframe 不会）并将所需的内容放入该 div 通常会更容易.

任何一个都可以工作。