替换 iframe 的全部内容答案

【问题标题】：Replace Entire Content of Iframe替换 iframe 的全部内容
【发布时间】：2011-04-26 00:14:56
【问题描述】：

有没有办法使用 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 属性的 cmets。

【问题讨论】：

theIframe.parentNode.replaceChild(theIframe, theNewIframe) 是一个选项吗？
为什么更改src属性不是一个选项？除非我们了解您的要求，否则我们无能为力。
哈哈哈我很确定我的要求很明确。无论如何，我们正在发出服务器请求，在服务器上生成一些长时间运行的内容，然后将其返回给客户端。响应数据包括父窗口和 iframe 的内容。
Write elements into a child iframe using Javascript or jQuery 的可能重复项

标签： javascript jquery iframe

【解决方案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。

【讨论】：

【解决方案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

【讨论】：

如果您要多次执行此操作，则需要使用 iframe.contentWindow.document.close()，否则 Firefox 将忽略以后的写入。 close() 方法也会触发框架的加载事件。

【解决方案3】：

我用这段代码解决了：

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

虽然这样在很多情况下你可以工作得更好，但也会有更多的秩序：

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

所以，head和body可以分开玩，身体发生不好的变化不会影响头部。

我在 Chrome 上测试过。

【讨论】：

一段时间后，我可以说第二种形式是正确的答案。我分别替换样式表和正文的头部。我使用了一个 HTML 模板，其头部和主体由一个字符串分隔，并使用 split() 命令将其分开。

【解决方案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 调用如下所示：

函数 loadPage(record_id) { $.ajax({ 类型：“发布”， url: "php/ajax_handler.php", 数据：“action=makeIFrame&record_id=”+record_id, 成功：功能（味精）{ $('.xFrame').html(msg); } }); }

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

希望这个（或类似的）对你有用。

【讨论】：

替换整个 iframe，包括 scr 属性。在这种情况下，我需要直接从父窗口中替换 iframe 的 content，而不刷新 iframe