<iframe>中srcdoc ="..."和src ="data:text/html,..."之间的区别是什么？

Question

例如,这些之间的区别是:

<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 attribute       |  srcdoc attribute
 --------------------------------------------------------------------
  URL              |  Yes                 |  No without using src (*)
  HTML content     |  Yes, using data URI |  Yes

为什么srcdoc需要？

---

(*)注意:

它似乎srcdoc可以用来通过URL(Demo)加载页面,使用带有src属性的子图:

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

Answer 1

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

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

<iframe srcdoc="...untrusted content" sandbox />< - 在现代浏览器中安全,在传统浏览器中安全(尽管不起作用)

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

Answer 2

来自MDN:

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

因此,该srcdoc属性会覆盖使用src属性嵌入的内容.

演示

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

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

^{1. MDN,2.MSDN}

Answer 3

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

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

Answer 4

在编写时 - Chrome中的srcdoc(v36)允许设置和获取cookie,而使用带有数据URL的src则不:

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

这可能对您来说很重要,也可能不重要,但排除了我正在构建的应用程序中数据URL的使用,这是一种耻辱,因为IE当然不支持srcdoc(v11).

Answer 5

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

Answer 6

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

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

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

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