使用 chrome 中的 javascript 将 iFrame src 属性设置为编码数据 URI
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8466584/
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
Setting iFrame src attribute as encoded data URI with javascript in chrome
提问by chrismamo1
I am trying to code an iFrame to act as a test area in an in-browser HTML/Javascript/CSS IDE in chrome, but I am losing a lot of functionality due to certain bugs, and I was wondering if someone could tell me how to set the .src attribute of the iFrame to a URL with the html Javascript CSS etc code encoded directly in the .src attribute. Don't tell me it can't be done, because I know it can, I just lost the web page where I found this method. Also, as a side note, would it be possible to programmatically force this iFrame to refresh?
我正在尝试编写一个 iFrame 作为 Chrome 浏览器内 HTML/Javascript/CSS IDE 中的测试区域，但由于某些错误，我失去了很多功能，我想知道是否有人可以告诉我如何将 iFrame 的 .src 属性设置为带有直接在 .src 属性中编码的 html Javascript CSS 等代码的 URL。不要告诉我它不能完成，因为我知道它可以，我只是丢失了找到此方法的网页。另外，作为旁注，是否可以以编程方式强制此 iFrame 刷新？
Thank you for your time,
感谢您的时间，
Chris
克里斯
采纳答案by rushkeldon
From my research it looks like this has been deemed a security risk and so is disallowed in all browsers.
从我的研究来看，这似乎被认为是一种安全风险，因此在所有浏览器中都是不允许的。
MS IE site linkexcerpt:
MS IE 网站链接摘录：
Data URIs are supported only for the following elements and/or attributes.
- object (images only)
- img
- input type=image
- link
- CSS declarations that accept a URL, such as background, backgroundImage, and so on.
仅以下元素和/或属性支持数据 URI。
- 对象（仅图像）
- 图片
- 输入类型=图像
- 关联
- 接受 URL 的 CSS 声明，例如 background、backgroundImage 等。
HTML5 Security Cheatsheet: http://html5sec.org/
HTML5 安全备忘单：http: //html5sec.org/
回答by Russ Danner
iframeEl.src = "data:text/html;charset=utf-8,"+content;
iframeEl.src = "data:text/html;charset=utf-8,"+content;
回答by Hashbrown
Use the srcdocattribute instead, you can just whack raw HTML in it.
改用该srcdoc属性，您可以在其中敲击原始 HTML。
<iframe srcdoc="<h1>HELLO</h1>"></iframe>
<iframe id="dynamic"></iframe>
<script>document.getElementById('dynamic').srcdoc = '<i>there</i>';</script>
Works in everything except the MS browsers.
Use sandboxto make it more secure.
适用于除 MS 浏览器之外的所有内容。
使用sandbox以使其更安全。
回答by robocat
Yes it can be done - see http://sparecycles.wordpress.com/2012/03/08/inject-content-into-a-new-iframe/
是的，可以做到 - 请参阅http://sparecycles.wordpress.com/2012/03/08/inject-content-into-a-new-iframe/
Note that the iframe will have the same origin as the original page, which might not be desired and may have serious security considerations depending on what you are doing.
请注意，iframe 将与原始页面具有相同的来源，这可能是不需要的，并且可能具有严重的安全考虑，具体取决于您在做什么。
An example of using the javascript: scheme technique is here: http://jsbin.com/uhenuz/4(If used with https would need extra googling and good testing to check that mixed https/http warning can never come up.)
使用 javascript: scheme 技术的一个例子在这里：http: //jsbin.com/uhenuz/4（如果与 https 一起使用，则需要额外的谷歌搜索和良好的测试来检查混合 https/http 警告永远不会出现。）
回答by John Smith
Refresh iframe:
刷新 iframe：
document.getElementById('iframeid').src = document.getElementById('iframeid').src
