Javascript 设置 iframe 的innerHTML

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5050380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 15:25:27  来源:igfitidea点击:

set innerHTML of an iframe

javascriptiframeinnerhtml

提问by tic

In javascript, how can I set the innerHTML of an iframe? I mean: how to set, not get.

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

window["ifrm_name"].document.innerHTML= "<h1>Hi</h1>"does not work, and the same for other solutions.

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

Iframe and parent document are on the same domain.

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

I would need to set html of the whole document iframe, not its body.

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

I would need to avoid jquery solution.

我需要避免 jquery 解决方案。

回答by Jeff Parker

A really simple example ...

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

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

then the following Javascript is run, either inline, part of an event, etc ...

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

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

the "contentDocument" is the equivalent of the "document" you get in the main window, so you can make calls against this to set the body, head, any elements inside ... etc.

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

I've only tested this in IE8, Chrome and Firefox ... so you may want to test in IE6/7 if you have copies available.

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

回答by Pekka

In Firefox and Chrome (don't know about Opera), you can use the data: URIscheme.

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

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

JSFiddle example

JSFiddle 示例

Hereis a tool to generate data:URI encoded data.

下面是一个生成数据的工具:URI 编码的数据。

This does not work in IE:

在 IE 中不起作用

For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.

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

If however as you say in the comment, getting/setting the document's body is enough, you are much easier off using one of the linked examples.

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

回答by nha

There is also the srcdocattribute:

还有一个srcdoc属性:

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

Demo, Polyfill.

演示Polyfill

回答by johnny3

In improving my file uploads in an AJAXS env I had the same need. This worked for me in ie8 and ff 22.0. Both the body innerhtml and div innerhtml work.

在改进我在 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;
}

got it from w3

从 w3 得到的