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

Question

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

感谢您的时间，

克里斯

原文由 chrismamo1 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据我的研究，这似乎被认为是一种安全风险，因此在所有浏览器中都是不允许的。

MS IE 站点链接 摘录：

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

• 对象（仅图像）
• 图片
• 输入类型=图像
• 关联
• 接受 URL 的 CSS 声明，例如背景、背景图像等。

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

原文由 rushkeldon 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

请改用 srcdoc 属性，您只需在其中敲打原始 HTML。

演示

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

适用于除 MS 浏览器之外的所有内容。

使用 sandbox 使其更安全。

原文由 Hashbrown 发布，翻译遵循 CC BY-SA 4.0 许可协议