使用chrome中的javascript将iFrame src属性设置为编码数据URI

Question

我正在尝试编写一个iFrame作为chrome中浏览器内HTML / Javascript / CSS IDE中的测试区域，但由于某些错误我失去了很多功能，我想知道是否有人可以告诉我如何将iFrame的.src属性设置为具有直接在.src属性中编码的html Javascript CSS等代码的URL。 不要告诉我它无法完成，因为我知道它可以，我只是丢失了我发现这种方法的网页。 另外，作为旁注，是否可以通过编程方式强制刷新此iFrame？

感谢您的时间，

克里斯

Answer 1

根据我的研究，它看起来像是一种安全风险，所以在所有浏览器中都不允许这样做。

MS IE网站链接摘录：

仅支持以下元素和/或属性的数据URI。

• 对象（仅限图像）
• IMG
• 输入类型=图像
• 链接
• 接受URL的CSS声明，例如background，backgroundImage等。

HTML5安全备忘单： http ： //html5sec.org/

Answer 2

iframeEl.src =“data：text / html; charset = utf-8，”+ content;

Answer 3

是的，可以这样做 - 请参阅http://sparecycles.wordpress.com/2012/03/08/inject-content-into-a-new-iframe/

请注意，iframe将与原始页面具有相同的来源，这可能是不合需要的，并且可能具有严重的安全性考虑因素，具体取决于您正在执行的操作。

使用javascript：scheme技术的一个例子是： http ： //jsbin.com/uhenuz/4 （如果与https一起使用则需要额外的谷歌搜索和良好的测试来检查混合的https / http警告永远不会出现。）

Answer 4

请改用srcdoc属性，您可以在其中srcdoc原始HTML。

演示

<iframe srcdoc="<h1>HELLO</h1>"></iframe>
<iframe id="dynamic"></iframe>
<script>document.getElementById('dynamic').srcdoc = '<i>there</i>';</script>

适用于除MS浏览器之外的所有内容。
使用sandbox使其更安全。

Answer 5

刷新iframe：

document.getElementById('iframeid').src = document.getElementById('iframeid').src