设置iframe的innerHTML

Question

在javascript中,如何设置iframe的innerHTML？我的意思是:如何设置,而不是获取.

window["ifrm_name"].document.innerHTML= "<h1>Hi</h1>" 不起作用,其他解决方案也一样.

iframe和父文档位于同一个域中.

我需要设置整个文档iframe的html,而不是它的正文.

我需要避免jquery解决方案.

Answer 1

一个非常简单的例子......

<iframe id="fred" width="200" height="200"></iframe>

然后运行以下Javascript,内联,事件的一部分等等......

var s = document.getElementById('fred');
s.contentDocument.write("fred rules");

"contentDocument"相当于您在主窗口中获得的"文档",因此您可以对此进行调用以设置正文,头部,内部的任何元素......等等.

我只在IE8,Chrome和Firefox中测试过这个...所以如果你有可用的副本,你可能想在IE6/7中进行测试.

Answer 2

在Firefox和Chrome中(不了解Opera),您可以使用data:URI方案.

 <iframe src=".... data: URI data here ......">

JSFiddle示例

这是一个生成数据的工具:URI编码数据.

这在IE中不起作用:

出于安全原因,数据URI仅限于下载的资源.数据URI不能用于导航,脚本编写或填充框架或iframe元素.

但是,正如您在评论中所说,获取/设置文档的正文就足够了,您可以更轻松地使用其中一个链接的示例.

Answer 3

还有一个srcdoc属性：

<iframe srcdoc="<p><h1>Hello</h1> world</p>"></iframe>

演示，Polyfill。