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

Question

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

感谢您的时间，

克里斯

Answer 1

从我的研究看起来，这被视为存在安全风险，所以在所有浏览器中都不允许这样做。

MS IE site link摘录：

  

仅支持以下元素和/或属性的数据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一起使用则需要额外的Google搜索和良好的测试，以检查混合的https / http警告是否永远不会出现。）

Answer 4

刷新iframe：

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

Answer 5

改为使用srcdoc属性，您可以在其中添加原始HTML。

Demo

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

除了MS浏览器以外的所有版本都可以使用。 使用sandbox使其更安全。