Javascript 替换 iframe 的整个内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5784638/
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
Replace Entire Content of Iframe
提问by Erik Lott
Is there a way to replace the ENTIRE contents of an iframe using Javascript (or Jquery)?
有没有办法使用 Javascript（或 Jquery）替换 iframe 的全部内容？
For example if my iframe had the following content...
例如，如果我的 iframe 具有以下内容...
blah outside of html
<html>
<head>
</head>
<body>
<h1> my title </h1>
</body>
</html>
blah outside of html
..It could all be replaced by your script :)
..它可以全部替换为您的脚本:)
The best that I've seen so far is this:
到目前为止，我见过的最好的是：
$(youriframe).contents().find('html').html('your content here');
but that still wouldn't replace the content outside of the html tags. We have an interesting scenario where we must assure that ALL the content is replaced.
但这仍然不会替换 html 标签之外的内容。我们有一个有趣的场景，我们必须确保替换所有内容。
OR a new iframe with fresh content is created and simply replaces the previous iframe.
或者创建一个带有新鲜内容的新 iframe 并简单地替换以前的 iframe。
Please no comments about the src attribute.
请不要对 src 属性发表评论。
回答by YuC
I am having the same issue, and if i use the code like this:
我有同样的问题，如果我使用这样的代码：
$(youriframe).contents().find('html').html('your content here');
It works fine in Chrome or FireFox, but in IE8, nothing will be showed or the scroll bar in iframe won't appear.
它在 Chrome 或 FireFox 中工作正常，但在 IE8 中，不会显示任何内容或 iframe 中的滚动条不会出现。
If i use Rachel's method, the iframe content will be like this in all browsers:
如果我使用 Rachel 的方法，iframe 内容在所有浏览器中都会是这样的：
<iframe>
<html>
<head>
</head>
<body>
</body>
</html>
</iframe>
is there any other solution?
还有其他解决方案吗？
Tried this one:
试过这个：
var doc = document.getElementById(iframeId).contentWindow.document;
doc.open();
doc.write(iframeContent);
doc.close();
this works on my case, both ie8 and FF/chrome.
这适用于我的情况，ie8 和 FF/chrome。
回答by James Alday
I'm guessing that you're not having problems with cross-site scripting in this instance... Have you had any luck using contentWindow? Something like this seems to work well enough for me:
我猜你在这种情况下没有跨站点脚本问题......你使用 contentWindow 有没有运气？像这样的事情对我来说似乎足够好：
iframe = document.getElementById('iframe_id');
iframe.contentWindow.document.open()
iframe.contentWindow.document.write(new_content_here);
Not my idea, found it here: Write elements into a child iframe using Javascript or jQuery
不是我的想法，在这里找到：Write element into a child iframe using Javascript or jQuery
回答by Carlos Eduardo Salazar Mori
I solved with this code:
我用这个代码解决了：
$('#IframeID').contents().find("html").html(html);
Although this way you can work better in many of the cases, there will be more order:
虽然这样你可以在许多情况下更好地工作，但会有更多的顺序：
$('#IframeID').contents().find("head").html(head);
$('#IframeID').contents().find("body").html(body);
So, you can play with headand bodyseparately, and a bad change on body will not affect your head.
所以，你可以分别玩head和玩，body身体不好的变化不会影响你的头。
I tested on Chrome.
我在 Chrome 上测试过。
回答by Rachel
have a similar scenario, where I am generating a new iFrame with content from a different domain each time the row of a table is clicked.
有一个类似的场景，每次单击表的行时，我都会生成一个包含来自不同域的内容的新 iFrame。
To do this, I use jQuery AJAX and PHP. PHP looks at my MySQL table and gets the URL of the iFrame I want to load; it generates the HTML for an iFrame, and I use jQuery AJAX to replace that content.
为此，我使用 jQuery AJAX 和 PHP。PHP 查看我的 MySQL 表并获取我要加载的 iFrame 的 URL；它为 iFrame 生成 HTML，我使用 jQuery AJAX 来替换该内容。
My HTML looks something like this:
我的 HTML 看起来像这样：
<div class="xFrame">
<iframe id="xFrameWindow" name="xFrameWindow" src=""></iframe>
</div>
And my AJAX call looks like this:
我的 AJAX 调用如下所示：
function loadPage(record_id) {
$.ajax({
type: "POST",
url: "php/ajax_handler.php",
data: "action=makeIFrame&record_id=" + record_id,
success: function(msg){
$('.xFrame' ).html(msg);
}
});
}
The code replaces the HTML of the div that contains the iFrame with a new iFrame.
该代码将包含 iFrame 的 div 的 HTML 替换为新的 iFrame。
Hope this (or something similar) works for you.
希望这（或类似的东西）对你有用。
