如何在沙盒 iframe (IE11) 中使用 javascript 创建 iframe 内容？答案

【问题标题】：How to create iframe content using javascript in a sandboxed iframe (IE11)?如何在沙盒 iframe (IE11) 中使用 javascript 创建 iframe 内容？
【发布时间】：2014-03-02 12:13:42
【问题描述】：

我正在尝试通过创建 iframe 并使用 javascript 或 vbscript 动态构建 iframe 内容来构建用于 Internet Explorer 的测试页面。我通常会使用 data: URI，但 IE 会阻止它。

例子。

<iframe sandbox="allow-scripts" src="javascript:document.write('test')"></iframe>

似乎 IE 是唯一一个不允许我通过 javascript:function() src 构建 iframe 内容的浏览器，即使设置了允许脚本沙箱属性也是如此。我不想在 iframe 和父窗口之间传递任何信息，也不想设置 allow-same-origin ，因为它几乎会破坏拥有沙盒 iframe 的目的。

除了 javascript 或 data: src 中的 URI 或通过父窗口中的 javascript，是否有任何其他方法可以动态构建 iframe 内容，因为由于同源限制，它不适用于沙盒 iframe？我也不想从外部页面设置内容。

【问题讨论】：

Can't write to iframe in FF or IE, only Chrome的可能重复

标签： javascript html internet-explorer iframe sandbox

【解决方案1】：

javascript: 是一种奇怪的 URI 协议。它适用于一些上下文，例如<a href>，但不是全部 - 例如，不能将窗口的位置设置为这样的 URI。（虽然您可以将 javascript: URI 分配给 window.location 作为运行脚本的一种非常迂回的方式，但窗口的位置不会保持设置为该值。）

要将内容写入 IFRAME，请获取对框架文档的引用并将其写入。这样做需要您设置 allow-same-origin 沙盒标志。

<iframe id="myframe" sandbox="allow-scripts allow-same-origin" src="about:blank"></iframe>

var frame = document.getElementById("myframe");
var fdoc = frame.contentDocument;

fdoc.write("Hello world"); // or whatever

现场示例：http://jsfiddle.net/wUvrF/1/

【讨论】：

javascript: 可以在所有浏览器中用作 iFrame 的 src 属性中的 URI，只要在除 IE 或允许之外的所有浏览器中未设置沙盒属性或设置为允许脚本 - IE中的同源。看来这是一个与沙盒 iframe 具有相同起源的问题，它是一个独特的域，这将使我无法通过父文档上的脚本对其进行修改。在沙盒属性中将 iFrame 设置为 allow-same-origin 会破坏对 iFrame 进行沙盒处理的目的，因此对于我要测试的内容而言，这不是一个可行的选择。
您可以在某处切换一些选项，允许您从 Chrome/Safari 的地址栏中运行 javascript URL。

【解决方案2】：

HTML5为此定义了“srcdoc”属性

<iframe seamless sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>

【讨论】：

Internet Explorer 不支持 srcdoc 属性，因此不适用于我正在尝试执行的操作。虽然它在支持它的其他浏览器中很有用，但我已经有办法使用 src 属性中的数据或 javascript URI 动态创建 iframe 源。不幸的是，我需要在 IE 中工作的东西。