Question

有没有办法用Javascript（或Jquery）替换iframe的整个内容？

例如，如果我的iframe有以下内容......

blah outside of html
<html>
<head>
</head>
<body>
<h1> my title </h1>
</body>
</html>
blah outside of html

..它可以全部替换为你的脚本：）

到目前为止我见过的最好的是：

$(youriframe).contents().find('html').html('your content here');

但仍然不会替换html标签之外的内容。我们有一个有趣的场景，我们必须确保所有内容都被替换。

或者创建一个包含新内容的新iframe，并简单地替换以前的iframe。

请不要评论src属性。

Answer 1

我遇到了同样的问题，如果我使用这样的代码：

$(youriframe).contents().find('html').html('your content here');

它在Chrome或FireFox中运行良好，但在IE8中，不显示任何内容或iframe中的滚动条不会出现。

如果我使用Rachel的方法，iframe内容在所有浏览器中都是这样的：

<iframe>
    <html>
        <head>
        </head>
        <body>
        </body>
    </html>
</iframe>

还有其他解决方案吗？

试过这个：

var doc = document.getElementById(iframeId).contentWindow.document;
doc.open();
doc.write(iframeContent);
doc.close();

这适用于我的情况，ie8和FF / chrome。

Answer 2

我猜你在这个例子中没有跨站点脚本问题...你有没有运气使用contentWindow？这样的事情对我来说似乎运作得很好：

iframe = document.getElementById('iframe_id');
iframe.contentWindow.document.open()
iframe.contentWindow.document.write(new_content_here);

不是我的想法，在此处找到：Write elements into a child iframe using Javascript or jQuery

Answer 3

我用以下代码解决了

$('#IframeID').contents().find("html").html(html);

尽管通过这种方式您可以在许多情况下更好地工作，但订单会更多：

$('#IframeID').contents().find("head").html(head);
$('#IframeID').contents().find("body").html(body);

因此，您可以分别玩head和body，身体的不好变化不会影响您的头部。

我在Chrome上进行了测试。

Answer 4

有一个类似的场景，我每次点击一行表时都会生成一个包含来自不同域的内容的新iFrame。

为此，我使用jQuery AJAX和PHP。 PHP查看我的MySQL表并获取我想要加载的iFrame的URL;它为iFrame生成HTML，我使用jQuery AJAX来替换该内容。

我的HTML看起来像这样：

<div class="xFrame">
    <iframe id="xFrameWindow" name="xFrameWindow" src=""></iframe>
</div>

我的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);
        }
    });
}

代码用新的iFrame替换包含iFrame的div的HTML。

希望这（或类似的东西）适合你。

替换Iframe的整个内容

4 个答案: