Question

例如，这些之间存在差异：

<iframe srcdoc="<p>Some HTML</p>"></iframe>
<iframe src="data:text/html,<p>Some HTML</p>"></iframe>

Demo

而且，如果它们完全相同，为什么HTML5会添加srcdoc属性？

修改

也许我不够清楚。我不是将src与srcdoc进行比较，而是src使用带有srcdoc的text / html数据URI。

然后，如果功能图表是这样的

                   |  src attribute       |  srcdoc attribute
 --------------------------------------------------------------------
  URL              |  Yes                 |  No without using src (*)
  HTML content     |  Yes, using data URI |  Yes

为什么需要srcdoc？

（*）注意：

srcdoc似乎可以使用带有src属性的子图表按网址Demo）加载网页：

<iframe srcdoc="<iframe src='http://microsoft.com'></iframe>"></iframe>

Answer 1

其他答案列出了一些肤浅的差异，但是真的错过了解释为什么浏览器/规范编写者基本上会复制已经存在的东西的关键差异的标记：

<iframe src="data:...untrusted content" sandbox />＆lt; - 在现有浏览器中安全，不安全在没有沙盒支持的旧版浏览器中

<iframe srcdoc="...untrusted content" sandbox />＆lt; - 在传统浏览器中安全，安全（虽然无法使用）

这种新语法为内容作者提供了一种保护用户的方法，即使他们可能正在使用旧版浏览器。如果没有它，内容作者根本不愿意使用沙盒功能，并且它不会被使用。

Answer 2

来自MDN：

^1.嵌入式上下文要包含的页面内容。这个预期属性将与沙箱和。一起使用无缝属性。如果浏览器支持srcdoc属性，则为将覆盖src属性中指定的内容（如果存在）。如果浏览器不支持srcdoc属性，它将显示而是在src属性中指定的文件（如果存在）。

因此，srcdoc属性会覆盖使用src属性嵌入的内容。

Demo

另外，您对以下代码段data:text/html所说的内容称为Data URI，但它有局限性。

^2.数据URI不能超过32,768个字符。

^{1. MDN，2。MSDN
功能}

Answer 3

带有HTML内容的src属性的iframe是跨域的，

但是，带有HTML内容的srcDoc属性的iframe不是跨域

Answer 4

撰写时 - Chrome（v36）中的srcdoc允许设置和获取Cookie，而使用带有数据URL的src则不会：

Uncaught SecurityError：无法从'Document'读取'cookie'属性：在'data：'URL
中禁用Cookie

这可能对你很重要，也可能不重要，但在我正在构建的应用程序中排除了数据URL的使用，这是一种耻辱，当然IE目前不支持srcdoc（v11）。

Answer 5

另一个值得注意的区别是，带有data-uri的src属性支持URI百分比编码规则，而srcdoc则不支持常规html语法，

这些来源的收益会有所不同：

<iframe srcdoc="<p>hello%20world</p><h1>give%0D%0Ame%0D%0Asome%24</h1>"></iframe>

<iframe src="data:text/html;charset=UTF-8,<p>hello%20datauri<p><h1>give%0D%0A me%0D%0Asome%24</h1>"></iframe>

我还注意到在属性值中解析js脚本的区别（它可能不仅仅是百分比编码），但还没有确定规则...

Answer 6

在您的示例中，这两种形式在功能上是相同的。但是，您可以使用src和srcdoc属性，允许非HTML5浏览器使用src版本，而HTML5浏览器可以使用srcdoc版本和{ {1}}和sandbox属性可以更灵活地处理iFrame。

Answer 7

srcdoc：嵌入式上下文要包含的页面内容。此属性应与沙箱和无缝属性一起使用。如果浏览器支持srcdoc属性，它将覆盖src属性中指定的内容（如果存在）。如果浏览器不支持srcdoc属性，它将显示src属性中指定的文件（如果存在）。

src：要嵌入的网页的网址。

Answer 8

主要区别在于'src'属性包含您要嵌入标签的文档的地址。

另一方面，'srcdoc'attribute包含要在内联框架中显示的页面的HTML内容。

srcdoc的主要缺点是所有浏览器都不支持它，而src与所有浏览器兼容。

详细说明请通过以下链接： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

在<iframe>？</iframe>中srcdoc =“...”和src =“data：text / html，...”之间的区别是什么？

8 个答案: