blocks|key|4760684|text|因为iframe元素不是一个自关闭元素。您正在使用的火狐和Safari版本最终将/>视为只是>，并假定它包含在iframe中之后的所有内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|4760685|如果我们尝试通过W3C's+validator传递您给出的代码，我们将看到以下错误：|4760686|4760687|错误:在非void+HTML元素上使用了自关闭语法(/>)。忽略斜杠并将其视为开始标记。|blockquote|4760688|4760689|如果你用浏览器的元素检查器检查你的文档，你会看到发生了什么。|4760690|我正在使用的Chrome将无效的<iframe+...+/>转换为<iframe+...></iframe>|4760691|​|4760692|📷|atomic|4760693|4760694|entityMap|0|LINK|mutability|MUTABLE|url|http://validator.w3.org/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/61bd72e0e17a8c56c692bb1ca0dd5b99.png|imageAlt^0|2|6|14|2|1A|1|1J|6|A|2|0|8|F|0|0|0|Q|2|0|0|0|G|E|X|L|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|1M|8|@]|E|@$9|1N|A|1O|1|1P]]|F|$]]|$1|I|3|-4|5|6|7|1Q|8|@]|E|@]|F|$]]|$1|J|3|K|5|L|7|1R|8|@$9|1S|A|1T|B|C]]|E|@]|F|$]]|$1|M|3|-4|5|6|7|1U|8|@]|E|@]|F|$]]|$1|N|3|O|5|6|7|1V|8|@]|E|@]|F|$]]|$1|P|3|Q|5|6|7|1W|8|@$9|1X|A|1Y|B|C]|$9|1Z|A|20|B|C]]|E|@]|F|$]]|$1|R|3|S|5|6|7|21|8|@]|E|@]|F|$]]|$1|T|3|U|5|V|7|22|8|@]|E|@$9|23|A|24|1|25]]|F|$]]|$1|W|3|S|5|6|7|26|8|@]|E|@]|F|$]]|$1|X|3|-4|5|6|7|27|8|@]|E|@]|F|$]]]|Y|$Z|$5|10|11|12|F|$13|14]]|15|$5|16|11|17|F|$18|19|1A|-4]]]]

Because the <code>iframe</code> element isn't a self-closing element. The versions of Firefox and Safari you're using are treating the <code>/&gt;</code> at the end as just <code>&gt;</code> and assuming everything after it is contained within the <code>iframe</code>.
If we attempt to pass the code you've given through <a href="http://validator.w3.org" rel="noreferrer">W3C's validator</a> we'll see the following errors:
<blockquote>
Error: Self-closing syntax (<code>/&gt;</code>) used on a non-void HTML element. Ignoring the slash and treating as a start tag.
<pre><code>&lt;iframe src=&quot;http://www.bing.com&quot;/&gt;
</code></pre>
Error: End of file seen when expecting text or an end tag.
<pre><code>&lt;/html&gt;
</code></pre>
Error: Unclosed element <code>iframe</code>.
<pre><code>&lt;iframe src=&quot;http://www.bing.com&quot;/&gt;
</code></pre>
</blockquote>
If you inspect your document with your browser's Element Inspector, you'll see what's going on.
Chrome, which I'm using, converts the invalid <code>&lt;iframe ... /&gt;</code> to <code>&lt;iframe ...&gt;&lt;/iframe&gt;</code>:
<img src="https://i.stack.imgur.com/tndTq.png" alt="Chrome Example" />

blocks|key|3329055|text|HTML中没有“自关闭iframe”这样的东西(或者，就这一点而言，任何其他类型的自关闭标签，只有一些元素可以或必须省略结束标签，而iframe不在其中)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3329056|您的iframe+开始标记的末尾有一个无效的/。|offset|length|style|BOLD|CODE|3329057|后面的所有内容都是iframe的子节点，因此它被视为不支持iframe的浏览器的替代内容。|3329058|3329059|XHTML支持自动结束标记，并且可以使用自结束标记添加任何元素(如果您与HTML不兼容)。|3329060|HTML5允许在忽略结束标记时在元素的开始标记的末尾添加/，但是除了满足XML上瘾和错误的语法高亮符号之外，它没有任何效果。|3329061|entityMap^0|0|9|4|M|1|0|0|0|0|S|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]|$D|V|E|W|F|H]]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|Z|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|10|8|@$D|11|E|12|F|H]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|Q|$]]

There's no such thing as a "self-closing iframe" in HTML (or, for that matter, any other kind of self-closing tag, there are just some elements where the end tag can or must be omitted and iframe is not one of them).

You have an iframe start tag with an invalid <code>/</code> at the end of it.

Everything that follows is a child node of the iframe, so it treated as alternative content for browsers that don't support iframes.

<hr>

XHTML supports self-closing tags, and any element may be added using one (if you aren't being HTML compatible).

HTML 5 allows for a <code>/</code> at the end of a start tag for an element when the end tag is omitted, but it has no effect beyond satisfying XML addiction and bad syntax highlighters.

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

<pre><code>&lt;iframe src="http://www.bing.com"/&gt;
&lt;iframe src="http://www.tsr.ch"/&gt;
</code></pre>

whereas adding the closing tag solves the issue

<pre><code>&lt;iframe src="http://www.bing.com"&gt;&lt;/iframe&gt;
&lt;iframe src="http://www.tsr.ch"&gt;&lt;/iframe&gt;
</code></pre>

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.

fiddle here : <a href="http://jsfiddle.net/hLcukz6p/">http://jsfiddle.net/hLcukz6p/</a>

Why is a self-closing iframe tag preventing further DOM elements to be displayed?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

在Firefox和Safari上，以下代码仅显示第一个iframe<iframe src="http://www.bing.com"/><iframe src="http://www.tsr.ch"/>而添加结束标记则解决了这个问题<iframe src="http://www.bing.com"></iframe><...

问为什么自动关闭的iframe标签会阻止显示更多的DOM元素？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么自动关闭的iframe标签会阻止显示更多的DOM元素？EN