为啥自关闭 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 版本将最后的 /&gt; 视为 &gt; 并假设它之后的所有内容都包含在 iframe 中。

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

错误:非空 HTML 元素上使用了自闭合语法 (/&gt;)。忽略斜线并将其视​​为开始标记。

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

错误:预期文本或结束标记时看到文件结尾。

</html>

错误:未关闭的元素iframe

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

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

我正在使用的 Chrome 将无效的 &lt;iframe ... /&gt; 转换为 &lt;iframe ...&gt;&lt;/iframe&gt;

【讨论】:

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

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

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

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


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

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

【讨论】:

以上是关于为啥自关闭 iframe 标记会阻止显示更多 DOM 元素?的主要内容,如果未能解决你的问题,请参考以下文章

为啥函数require_once会阻止我的代码工作[关闭]

为啥找不到显示属性? (更多下文)

小程序左上角webview关闭

为啥当设备在 android 中水平时,ListView 内的嵌套自定义视图会阻止正确聚焦?

为啥阻止a标签的默认事件

如何阻止我的网站加载到其他网站 iframe