在<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进行比较，而是使用带有srcdoc text / html数据URI进行srcdoc 。

那么，如果function图是这样的

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

为什么需要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 /> < – 在现代浏览器中安全，在传统浏览器中安全 （尽pipe不起作用）

这种新的语法为内容作者提供了一种保护用户的方法，即使他们可能正在使用传统的浏览器。 没有它，内容作者将不愿意使用沙盒function，它不会看到使用。

Answer 2

来自MDN：

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

所以， srcdoc属性会覆盖使用src属性embedded的内容。

演示

---

另外，你对下面的代码段data:text/html有什么看法data:text/html被称为Data URI ，它有一定的局限性。

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

^{1. MDN ，2. MSDN}

Answer 3

至于编写 – Chrome中的srcdoc（v36）允许设置和获取cookie，而使用src和data URL不会：

未捕获的SecurityError：未能从“文档”中读取“cookie”属性：在“data：”url中禁用Cookie

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

Answer 4

具有HTML Content的src属性的Iframe是跨域的，

但是带有HTML Content的srcDoc属性的iframe不是跨域的

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> 

Answer 6

在你的例子中，两种forms在function上是相同的。 但是，您可以同时使用src和srcdoc属性，允许非HTML5浏览器使用src版本，而HTML5浏览器可以使用srcdoc版本以及sandbox和seamless属性，从而为iFrame的处理提供更多的灵活性。

Answer 7

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

src：要embedded的页面的URL。

Answer 8

主要区别在于“src”属性包含要embedded到标记中的文档的地址。

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

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

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