设置 iframe 的 innerHTML

Question

在JavaScript中，我该如何设置iframe的innerHTML？我的意思是：如何设置，而不是获取。 window ["ifrm_name"] .document.innerHTML =“<h1> Hi </h1>”无法正常工作，其他解决方案也是一样。

iframe和父文档位于同一域中。

我需要设置整个文档iframe的HTML，而不是其body。

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

- tic

---

我认为在某些浏览器中可能是可行的，但在其他浏览器中不行。你需要支持哪些浏览器？为什么不使用一个简单的 div 代替呢？ - Pekka

@infoSetu 我认为他想设置完整文档。 - Pekka

@Pekka：如果我必须选择，我希望它在Firefox中工作。我需要一个iframe，因为我必须“模拟”一个真实的页面，其中包含脚本和CSS外部链接。@infoSetu：你看到我问题文本中的链接了吗？我需要设置，而不是获取；我需要设置文档的属性，而不是其中一个元素的属性。 - tic

@info 不是，他需要设置整个文档，不仅仅是正文部分。 - Pekka

承认身体可能足够，哪个解决方案是完美的？在你（以及你之前的我）链接的页面中，哪一个是完美的？它是获取还是设置也是完美的？ - tic

Answer 1

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

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

然后以下JavaScript将运行，可以是内联的，也可以作为事件的一部分等等...

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

"contentDocument"相当于主窗口中获取的"document"，因此您可以通过对其进行调用来设置body、head以及任何内部元素等。

我只在IE8、Chrome和Firefox上测试过，因此如果您有可用的IE6/7副本，则可能需要在那些浏览器上进行测试。

- Jeff Parker

---

.write可以正常工作，但如果我运行s.contentDocument.documentElement.innerHTML="<br/><h1>fred rules</h1>";则无法正常工作。 - tic

你真的在IE8中测试过这个吗？ - mplungjan

小心，你可能需要关闭与 s.contentDocument.close() 的连接。请参考这篇帖子。 - Jecimi

Answer 2

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

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

JSFiddle示例

这里有一个工具Here可以生成数据：URI编码的数据。

这在IE中无法使用:

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

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

- Pekka

---

数据URI，很有趣，我之前不知道。我在想DOM隔离的问题，但也许我会开另一个问题。 - tic

Answer 3

还有一个 srcdoc 属性:

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

演示，Polyfill 补丁。

- nha

Answer 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获取到了它

- johnny3

---

不确定为什么有人会想这样做。 - Arnaud Rinquin

Answer 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>

- Arthur A. Kennedy