Question

在javascript中，如何设置iframe的innerHTML？我的意思是：如何设置，而不是get。

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 example

Here是生成数据的工具：URI编码数据。

这是not work in IE：

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

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

Answer 3

在改进我在AJAXS环境中的文件上传时，我有同样的需求。这在ie8和ff 22.0中对我有用。 body innerhtml和div innerhtml都可以工作。

function copyframedata(data) {
  var x = document.getElementById("photo_mgr_frame");
  var y = x.contentWindow || x.contentDocument;
  if (y.document) y = y.document;
  y.getElementById('photo_mgr_mb').innerHTML = data;
}

从w3获得它

Answer 4

还有srcdoc属性：

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

Demo，Polyfill。

设置iframe的innerHTML

4 个答案: