为什么自闭合 iframe 标签会阻止显示更多 DOM 元素? [英] Why is a self-closing iframe tag preventing further DOM elements to be displayed?

问题描述

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

On Firefox and Safari, the following code displays only the first iframe

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

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

whereas adding the closing tag solves the issue

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

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

I don't understand why it does not work. When parsing the second example with DOMParser, it anyways does the transformation to self-closing iframes.

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

推荐答案

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

Because the iframe element isn't a self-closing element. The versions of Firefox and Safari you're using are treating the /> at the end as just > and assuming everything after it is contained within the iframe.

如果我们尝试通过W3C 的验证器 传递您提供的代码，我们将看到以下错误:

If we attempt to pass the code you've given through W3C's validator we'll see the following errors:

错误:用于非空 HTML 元素的自闭合语法 (/>).忽略斜线并将其视​​为开始标记.

Error: Self-closing syntax (/>) used on a non-void HTML element. Ignoring the slash and treating as a start tag.

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

错误:在需要文本或结束标记时看到文件结尾.

Error: End of file seen when expecting text or an end tag.

</html>

错误:未关闭的元素 iframe.

Error: Unclosed element iframe.

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

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

If you inspect your document with your browser's Element Inspector, you'll see what's going on.

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

Chrome, which I'm using, converts the invalid <iframe ... /> to <iframe ...></iframe>:

这篇关于为什么自闭合 iframe 标签会阻止显示更多 DOM 元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！