为什么自关闭 iframe 标记会阻止显示更多 DOM 元素？答案

【问题标题】：Why is a self-closing iframe tag preventing further DOM elements to be displayed?为什么自关闭 iframe 标记会阻止显示更多 DOM 元素？
【发布时间】：2015-02-17 04:36:09
【问题描述】：

在 Firefox 和 Safari 上，以下代码仅显示第一个 iframe

<iframe src="http://www.bing.com"/>
<iframe src="http://www.tsr.ch"/>

而添加结束标签可以解决问题

<iframe src="http://www.bing.com"></iframe>
<iframe src="http://www.tsr.ch"></iframe>

我不明白为什么它不起作用。使用 DOMParser 解析第二个示例时，它无论如何都会转换为自关闭 iframe。

在这里提琴：http://jsfiddle.net/hLcukz6p/

【问题讨论】：

IFrame 不会自动关闭。行为是设计使然。如果 DOMParser 的做法不同，它就没有遵循标准
iframe 和脚本不支持自关闭格式。烦人，我知道。那是给你的 HTML :(
我在这上面浪费了几个小时！太令人沮丧了，感谢您的帖子并感谢所有答案

标签： html dom iframe

【解决方案1】：

因为iframe 元素不是自闭合元素。您使用的 Firefox 和 Safari 版本将最后的 /> 视为 > 并假设它之后的所有内容都包含在 iframe 中。

如果我们尝试通过W3C's validator 传递您提供的代码，我们将看到以下错误：

错误：非空 HTML 元素上使用了自闭合语法 (/>)。忽略斜线并将其视为开始标记。
<iframe src="http://www.bing.com"/>
错误：预期文本或结束标记时看到文件结尾。
</html>
错误：未关闭的元素iframe。
<iframe src="http://www.bing.com"/>

如果您使用浏览器的元素检查器检查您的文档，您会看到发生了什么。

我正在使用的 Chrome 将无效的 <iframe ... /> 转换为 <iframe ...></iframe>：

【讨论】：

浏览器不会忽略>。这仍然标志着开始标签的结束。
感谢您的回复。这说得通。我最初有一个正确的结束标签。发生的情况是我将此 html 存储在数据库中，一旦检索到它，我就使用 DOMParser。不幸的是，DOMParser 将有效代码转换为无效格式。
我不熟悉 DOMParser，但您确定它实际上是在翻译 HTML，而不仅仅是向您展示 DOM 树的几乎但不是完全的 HTML 表示？它可以随心所欲地呈现。

【解决方案2】：

在 HTML 中没有“自关闭 iframe”（或者，就此而言，任何其他类型的自关闭标签，只有一些元素可以或必须省略结束标签，而 iframe 是不是其中之一）。

您有一个 iframe 开始标记，其末尾带有无效的/。

随后的所有内容都是 iframe 的子节点，因此它被视为不支持 iframe 的浏览器的替代内容。

XHTML 支持自闭合标签，任何元素都可以使用一个标签添加（如果您不兼容 HTML）。

HTML 5 允许在省略结束标签时在元素的开始标签末尾添加 /，但除了满足 XML 成瘾和糟糕的语法高亮之外，它没有任何作用。

【讨论】：