为啥自关闭 iframe 标记会阻止显示更多 DOM 元素?
Posted
技术标签:
【中文标题】为啥自关闭 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 :( 我在这上面浪费了几个小时!太令人沮丧了,感谢您的帖子并感谢所有答案 【参考方案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 成瘾和糟糕的语法高亮之外,它没有任何作用。
【讨论】:
以上是关于为啥自关闭 iframe 标记会阻止显示更多 DOM 元素?的主要内容,如果未能解决你的问题,请参考以下文章