<iframe> 中的 srcdoc="..." 和 src="data:text/html,..." 之间的区别是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19739001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Which is the difference between srcdoc="..." and src="data:text/html,..." in an <iframe>?
提问by Oriol
For example, which is the difference between these:
例如，这是它们之间的区别：
<iframe srcdoc="<p>Some HTML</p>"></iframe>
<iframe src="data:text/html,<p>Some HTML</p>"></iframe>
And, in case they are exactly the same, why did HTML5 add srcdocattribute?
而且，如果它们完全相同，为什么 HTML5 添加srcdoc属性？
Edit
编辑
Maybe I wasn't clear enough. I am not comparing srcwith srcdoc, but srcusing text/html data URI with srcdoc.
可能是我说的不够清楚。我不是比较src有srcdoc，但src使用text / html的数据URI用srcdoc。
Then, if the functionality chart is like this
那么，如果功能图是这样的
| src attribute | srcdoc attribute -------------------------------------------------------------------- URL | Yes | No without using src (*) HTML content | Yes, using data URI | Yes
why is srcdocneeded?
为什么srcdoc需要？
(*) Note:
(*) 注：
It seems srcdoccan be used to load a page by URL (Demo), using a subiframe with srcattribute:
它似乎srcdoc可用于通过 URL ( Demo)加载页面，使用具有src属性的子框架：
<iframe srcdoc="<iframe src='http://microsoft.com'></iframe>"></iframe>
回答by Fabio Beltramini
The other answers list some superficial differences, but really miss the mark of the key difference that explains whybrowsers/spec writers would essentially duplicate something that already exists:
其他答案列出了一些表面上的差异，但实际上忽略了解释为什么浏览器/规范编写者基本上会复制已经存在的东西的关键差异的标记：
<iframe src="data:...untrusted content" sandbox /><- Secure in modern browsers, insecurein legacy browsers with no sandbox support
<iframe src="data:...untrusted content" sandbox /><- 在现代浏览器中安全，在没有沙箱支持的旧浏览器中不安全
<iframe srcdoc="...untrusted content" sandbox /><- Secure in modern browsers, secure(though non-functional) in legacy browsers
<iframe srcdoc="...untrusted content" sandbox /><- 在现代浏览器中安全，在旧浏览器中安全（尽管不起作用）
This new syntax provides content authors a way to protect their users, even when they may be using legacy browsers. Without it, content authors would be reluctant to use the sandbox feature at all, and it would not see use.
这种新语法为内容作者提供了一种保护用户的方法，即使他们可能使用的是旧版浏览器。没有它，内容作者将根本不愿意使用沙箱功能，并且看不到它的用途。
回答by Mr. Alien
From MDN :
来自 MDN ：
1.The content of the page that the embedded context is to contain. This attribute is expected to be used together with the sandbox and seamless attributes. If a browser supports the srcdoc attribute, it will override the content specified in the src attribute (if present). If a browser does NOT support the srcdoc attribute, it will show the file specified in the src attribute instead (if present).
1.嵌入上下文要包含的页面内容。该属性预计将与沙箱和无缝属性一起使用。如果浏览器支持 srcdoc 属性，它将覆盖 src 属性（如果存在）中指定的内容。如果浏览器不支持 srcdoc 属性，它将显示在 src 属性中指定的文件（如果存在）。
So, the srcdocattribute overrides the content embedded using srcattribute.
因此，该srcdoc属性会覆盖使用src属性嵌入的内容。
Also, what you are saying about the following snippet data:text/htmlis called Data URIand it has limitations..
此外，您对以下代码段所说的内容data:text/html称为数据 URI，它具有局限性。
2.Data URIs cannot be larger than 32,768 characters.
2.数据 URI 不能大于 32,768 个字符。
回答by wombling - Chris Paine
As of writing - srcdoc in Chrome (v36) allows the setting and fetching of cookies, whereas the use of src with data URL does not:
在撰写时 - Chrome (v36) 中的 srcdoc 允许设置和获取 cookie，而将 src 与数据 URL 一起使用则不允许：
Uncaught SecurityError: Failed to read the 'cookie' property from 'Document': Cookies are disabled inside 'data:' URLs
未捕获的安全错误：无法从“文档”中读取“cookie”属性：在“数据：”URL 中禁用了 Cookie
This may or may not be important to you, but rules out the use of data URLs in the application I am building, which is a shame, as of course IE doesn't support srcdoc currently (v11).
这对您来说可能重要也可能不重要，但排除了在我正在构建的应用程序中使用数据 URL 的可能性，这很遗憾，因为 IE 目前不支持 srcdoc (v11)。
回答by Devin Zhang
Iframe with srcattribute with HTML Content is cross domain,
src带有 HTML 内容属性的iframe是跨域的，
But iframe with srcDocattribute with HTML Content is not cross domain
但是srcDoc带有 HTML 内容属性的iframe不是跨域的
回答by maioman
Another noticeable difference is that srcattributes with data-uri support URI percent-encoding rules while srcdocdoesn't as it supports regular html syntax,
另一个明显的区别是src带有 data-uri 的属性支持 URI 百分比编码规则，srcdoc但不支持常规 html 语法，
these sources will yield differently:
这些来源将产生不同的结果：
<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>I also noticed a difference in the parsing of js scripts inside the attributes value( it's probably more than just percentage-encoding ) but didn't figure the rule yet...
我还注意到属性值中 js 脚本的解析有所不同（它可能不仅仅是百分比编码），但还没有弄清楚规则......
回答by maioman
In your example the two forms are functionally identical. However, you can use both srcand srcdocattributes, allowing non-HTML5 browsers to use the srcversion, while HTML5 browsers can use the srcdocversion along with the sandboxand seamlessattributes which offer more flexibility in how an iFrame is treated.
在您的示例中，这两种形式在功能上是相同的。但是，您可以同时使用srcandsrcdoc属性，允许非 HTML5 浏览器使用src版本，而 HTML5 浏览器可以使用srcdoc版本以及sandbox和seamless属性，这为 iFrame 的处理方式提供了更大的灵活性。
回答by saransh sharma
srcdoc:The content of the page that the embedded context is to contain. This attribute is expected to be used together with the sandbox and seamless attributes. If a browser supports the srcdoc attribute, it will override the content specified in the src attribute (if present). If a browser does NOT support the srcdoc attribute, it will show the file specified in the src attribute instead (if present).
srcdoc：嵌入上下文要包含的页面内容。该属性预计将与沙箱和无缝属性一起使用。如果浏览器支持 srcdoc 属性，它将覆盖 src 属性（如果存在）中指定的内容。如果浏览器不支持 srcdoc 属性，它将显示在 src 属性中指定的文件（如果存在）。
src:The URL of the page to embed.
src：要嵌入的页面的 URL。
回答by R R
The main difference is that the 'src' attribute contains the address of the document you are going to embed in the tag.
主要区别在于“src”属性包含您要嵌入到标签中的文档的地址。
On the other hand 'srcdoc'attribute contains the HTML content of the page to show in the inline frame.
另一方面，'srcdoc' 属性包含要在内嵌框架中显示的页面的 HTML 内容。
the main disadvantage of srcdoc is that it is not supported in all browsers whereas src is compatible with all the browsers.
srcdoc 的主要缺点是并非所有浏览器都支持它，而 src 与所有浏览器兼容。
for detailed explanation please go through the following link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
有关详细说明，请访问以下链接：https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
