替换 iframe 的整个内容
[英]Replace Entire Content of Iframe
问题描述
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.但这仍然不会替换 html 标签之外的内容。 We have an interesting scenario where we must assure that ALL the content is replaced.我们有一个有趣的场景，我们必须确保替换所有内容。
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 属性发表评论。
4 个解决方案
解决方案1
23 2012-11-30 02:41:36
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。
解决方案2
17 2011-05-25 18:39:06
I'm guessing that you're not having problems with cross-site scripting in this instance... Have you had any luck using contentWindow?我猜你在这种情况下没有跨站点脚本问题......你使用 contentWindow 有没有运气？ Something like this seems to work well enough for me:像这样的事情对我来说似乎足够好：
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
解决方案3
0 2020-03-16 14:25:10
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 head and body separately, and a bad change on body will not affect your head.所以，你可以分开玩head和body ， body的不好变化不会影响你的头。
I tested on Chrome.我在 Chrome 上测试过。
解决方案4
-3 2011-05-01 21:32:50
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.为此，我使用 jQuery AJAX 和 PHP。 PHP looks at my MySQL table and gets the URL of the iFrame I want to load; PHP 查看我的 MySQL 表并获取我要加载的 iFrame 的 URL； it generates the HTML for an iFrame, and I use jQuery AJAX to replace that content.它为 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.希望这（或类似的东西）对你有用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.