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

【问题标题】：Setting iFrame src attribute as encoded data URI with javascript in chrome在 chrome 中使用 javascript 将 iFrame src 属性设置为编码数据 URI
【发布时间】：2012-01-17 23:46:26
【问题描述】：

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

感谢您的宝贵时间，

克里斯

【问题讨论】：

为什么首先需要这样做？你指的是什么错误？
如果我只是通过标准 DOM 编辑 iFrames 内容，Javascript 将无法正常执行。
@Pekka，对不起。也许我没有正确解释它，但我已经看到了将 iFrame 的 src 属性替换为 text/html 类型的数据 URI 的示例。有人至少可以将我引导到一个页面，其中包含将 iFrames .src 属性设置为从 Javascript 中的字符串编码的数据 URI/URL 的说明，我可以尝试找出其余部分。拜托，我还没有弄清楚这个。
这个 won't work at all 在 Internet Explorer 中 - 这对于许多用途来说是一个强有力的反驳论据。我不确定这是解决您的任何问题的正确方法

标签： javascript html google-chrome

【解决方案1】：

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

MS IE site link摘录：

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

对象（仅限图片）

img

输入类型=图像

链接

接受 URL 的 CSS 声明，例如 background、backgroundImage 等。

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

【讨论】：

【解决方案2】：

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

Demo

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

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

【讨论】：

我使用的是 [ "src" = "data:text/html;charset=utf-8,"+content ] 方法，它在大多数情况下都有效。但是，当内容超过一定长度时，chrome 会拒绝显示内容。这种方法甚至适用于大量内容，因此至少在这方面它更胜一筹。
我希望如此，它是为目的而设计的，而不是一种解决方法。很高兴看到修复旧线程仍然可以帮助人们

【解决方案3】：

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

【讨论】：

如果您需要支持 IE，则不能使用数据 URI - 请参阅 msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx

【解决方案4】：

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

请注意，iframe 将与原始页面具有相同的来源，这可能不是我们所希望的，并且可能有严重的安全考虑，具体取决于您正在执行的操作。

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

【讨论】：

【解决方案5】：

刷新 iframe：

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

【讨论】：