iframe vs innerHTML用于模态对话 - 哪个更好？ [英] iframe vs innerHTML for a modal dialog - which is better?

问题描述

我在HTML5页面上模拟一个模态窗口功能，创建一个带有位置的div：fixed ，以浏览器窗口为中心等等。在某些情况下，我的模态窗口只是显示带有一个或多个按钮的消息，例如确定 取消，但在其他情况下，我显示更复杂形式，例如即时消息对话框。

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

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

浏览器要求：IE9 +以及其他理智的浏览器。

iframe 。使用iframe的原因是：

1. 从其他域加载内容的最简单方法。


2. 从单独的域中隔离内容的安全上下文。


3. 在您的网页中嵌入完全独立的网页（独立脚本，独立样式表等）。


4. 您不想编写ajax代码来动态加载内容，并且只想使用iframe的内置 .src 功能。

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

可以使其工作。

I am emulating a modal window functionality on my HTML5 page by creating a div with position: fixed, centered in the browser window etc. In some cases my modal window just shows a message with one or more buttons, such as OK Cancel, but in other cases I'm showing more complicated forms, e.g. an instant messaging dialog.

The question is for the more complicated cases. So which is better, (1) to have an <iframe> in my "modal" window or (2) a <div> plus some Ajax code that retrieves the contents of my form and injects it into the div's innerHTML?

What are some caveats in either case? When you choose one over the other, what is your reasoning?

Browser requirements: IE9+ and the rest of the sane browsers.

解决方案

You should only use an iframe if you actually need an iframe. Reasons to use an iframe are:

1. The simplest way to load content from another domain.
2. To isolate the security context for content from a separate domain.
3. To embed a completely independent web page (independent scripts, independent style sheets, etc...) in your web page.
4. You don't want to write ajax code to load content dynamically and want to just use the built-in .src capability of an iframe.

If you don't need any of these capabilities of an iframe, then it's generally easier to use use a div (which will auto-size to its content - whereas an iframe will not) and put the desired content in that div.

Either can be made to work.

这篇关于iframe vs innerHTML用于模态对话 - 哪个更好？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！