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

Question

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

感谢您的时间,

克里斯

Answer 1

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

演示

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

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

Answer 2

iframeEl.src = "data:text/html;charset=utf-8,"+content;

Answer 3

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

MS IE网站链接摘录:

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

• 对象(仅限图像)
• IMG
• 输入类型=图像
• 链接
• 接受URL的CSS声明,例如background,backgroundImage等.

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