<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属性?

编辑

也许我还不够清楚。 我不是将srcdocsrc进行比较,而是src使用text / html数据URI和srcdoc

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

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

为什么需要srcdoc


(*) 注意:

似乎srcdoc可用于通过带有src属性的子帧通过URL(Demo)加载页面:

<iframe srcdoc="<iframe src='http://microsoft.com'></iframe>"></iframe>
Oriol asked 2019-10-09T10:56:01Z
8个解决方案
36 votes

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

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

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

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

Fabio Beltramini answered 2019-10-09T10:56:33Z
17 votes

从MDN:

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

因此,data:text/html属性将覆盖使用src属性嵌入的内容。

演示


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

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

1. MDN,2。MSDN

Mr. Alien answered 2019-10-09T10:57:33Z
11 votes

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

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

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

wombling - Chris Paine answered 2019-10-09T10:58:11Z
10 votes

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

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

Devin Zhang answered 2019-10-09T10:58:43Z
3 votes

另一个明显的区别是,带有data-uri的<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>属性支持URI百分比编码规则,而srcdoc不支持URI常规语法,因此不支持

这些来源将产生不同的结果:

<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脚本的解析有所不同(它可能不只是百分比编码),但还没有弄清楚规则……

maioman answered 2019-10-09T10:59:29Z
0 votes

在您的示例中,这两种形式在功能上是相同的。 但是,您可以同时使用srcsrcdoc473属性,从而允许非HTML5浏览器使用srcdoc474版本,而HTML5浏览器可以将srcdoc475版本与sandbox476和2561563538133353353477属性结合使用,从而在处理iFrame时提供了更大的灵活性。

answered 2019-10-09T10:59:58Z
-3 votes

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

src:要嵌入的页面的URL。

saransh sharma answered 2019-10-09T11:00:32Z
-4 votes

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

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

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

有关详细说明,请通过以下链接:[https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe]

R R answered 2019-10-09T11:01:22Z
translate from https://stackoverflow.com:/questions/19739001/which-is-the-difference-between-srcdoc-and-src-datatext-html-in-an