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

例如，这是它们之间的区别：

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

演示版

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

编辑

也许我还不够清楚。我不是比较src有srcdoc，但src使用text / html的数据URI用srcdoc。

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

                   | src属性| srcdoc属性
 -------------------------------------------------- ------------------
  网址| 是的 不使用src（*）
  HTML内容| 是的，使用数据URI | 是

为什么srcdoc需要？

（*）注意：

似乎srcdoc可以使用带有属性的子框架通过URL（Demo）加载页面src：

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

其他答案列出了一些表面上的差异，但实际上错过了关键差异的标记，该差异解释了为什么浏览器/规范编写者将本质上复制已经存在的内容：

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

<iframe srcdoc="...untrusted content" sandbox /><-在现代浏览器中是安全的，在旧版浏览器中是安全的（尽管不起作用）

这种新语法为内容作者提供了一种保护其用户的方法，即使他们可能正在使用旧版浏览器也是如此。没有它，内容作者将根本不愿使用沙盒功能，也看不到它的用途。

从MDN：

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

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

演示版

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

^2.数据URI不能大于32,768个字符。

^{1. MDN，2。MSDN}

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

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

撰写本文时-Chrome（v36）中的srcdoc允许设置和提取cookie，而将src与数据URL结合使用不能：

未捕获的SecurityError：无法从“文档”中读取“ Cookie”属性：在“数据：” URL中禁用了Cookie

这对您可能并不重要，但可能会排除我正在构建的应用程序中数据URL的使用，这很可惜，因为IE当然当前不支持srcdoc（v11）。

另一个明显的区别是srcdata-uri属性支持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脚本解析有所不同（它可能不只是百分比编码），但还没有弄清楚规则……

在您的示例中，这两种形式在功能上是相同的。但是，您可以同时使用src和srcdoc属性，从而允许非HTML5浏览器使用该src版本，而HTML5浏览器可以将该srcdoc版本与sandbox和seamless属性一起使用，从而在处理iFrame时提供了更大的灵活性。

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

src：要嵌入的页面的URL。

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

另一方面，“ srcdoc”属性包含要在嵌入式框架中显示的页面的HTML内容。

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

有关详细说明，请访问以下链接：https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe