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

编辑

也许我不够清楚。 我没有将srcsrcdoc进行比较,而是使用带有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> 

其他答案列出了一些肤浅的差异,但真的错过了关键区别的标志,这就解释了为什么浏览器/规格作者基本上会复制已经存在的东西:

<iframe src="data:...untrusted content" sandbox /> < – 在现代浏览器中安全,在传统浏览器中不安全 ,不支持沙盒

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

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

来自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

至于编写 – Chrome中的srcdoc(v36)允许设置和获取cookie,而使用src和data URL不会:

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

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

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

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

另一个值得注意的区别是,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> 

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

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

src:要embedded的页面的URL。

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

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

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

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