设置 iframe 的 innerHTML答案

【问题标题】：set innerHTML of an iframe设置 iframe 的 innerHTML
【发布时间】：2011-06-30 08:09:06
【问题描述】：

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

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

iframe 和父文档在同一个域中。

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

我需要避免使用 jquery 解决方案。

【问题讨论】：

我认为这在某些浏览器中是可能的，但在其他浏览器中则不然。你需要支持哪些？为什么不改用简单的div？
@infoSetu 也不是他想要的，我想他想设置完整的文档
@Pekka：如果我必须选择，我希望它在 Firefox 中工作。我需要一个 iframe，因为我必须“模拟”一个带有脚本和 css 外部链接的真实页面。 @infoSetu：您看到我的问题文本中的链接了吗？我需要设置，而不是获取；我需要设置文档的属性，而不是其中一个元素。
@info 不，他需要设置整个文档，而不仅仅是正文。
承认身体已经足够了，哪种解决方案是完美的？您（以及您之前的我）链接的页面中的哪一个是完美的？它是完美的获取还是设置？

标签： javascript iframe innerhtml

【解决方案1】：

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

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

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

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

“contentDocument”等同于您在主窗口中获得的“文档”，因此您可以调用它来设置正文、头部、内部的任何元素……等等。

我只在 IE8、Chrome 和 Firefox...

【讨论】：

.write 有效，但如果我运行 s.contentDocument.documentElement.innerHTML="
fred rules
";它不起作用。
你真的在 IE8 中测试过这个吗？
小心，你可能需要用 s.contentDocument.close(); 关闭连接见this post

【解决方案2】：

在 Firefox 和 Chrome（不了解 Opera）中，您可以使用 data: URI 方案。

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

JSFiddle example

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

这是not work in IE:

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

但是，如果正如您在评论中所说，获取/设置文档的正文就足够了，那么使用其中一个链接示例会更容易。

【讨论】：

data: URI，有趣，我不知道。我想知道 DOM 隔离，但也许我会提出另一个问题。

【解决方案3】：

还有srcdoc属性：

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

Demo, Polyfill.

【讨论】：

【解决方案4】：

在改进 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 得到它

【讨论】：

不知道为什么会有人这样做。

【解决方案5】：

我遇到了同样的问题，但这里有一个简单的解决方法。

function Run(){
   var txt = "<h1>Hello World</h1>";
   var frame = document.getElementById('frame');

   var frame = (frame.contentWindow || frame.contentDocument);
   if (frame.document) frame = frame.document;

   frame.open();
   frame.write(txt);
   frame.close();
}

<iframe id='frame'>
</iframe>
<button onclick='Run()'>Run</button>

【讨论】：