iframe如何使用javascript替换内容？

Posted 2023-04-26

当页面加载完成时，iframe已经将对应的网址内容显示完成了。
浏览者与网页进行一些交互后，需要把更改反应在iframe中，比如，修改了样式、或html代码，该如何实现呢？
我希望只刷新iframe元素就可以完成，而不是再重新加载页面。

有没有方法，可以完全替换掉iframe的css、js、html代码，而不用与服务器交互？只在客户端就完成的？
或者需要服务器参与，只刷新iframe的？
再退一步，能成功显示改变就可以的。
请告之详细方法，谢谢！

可以，使用
contentWindow来获取iframe的window对象

如
<iframe id="aaa"></iframe>
...
document.getElementById("aaa").onload = function()
alert(document.getElementById("aaa").contentWindow.document.body.innerHTML);
;追问

请问，css和js，可以被替换吗？使用字符串，替换原来的文件。
比如，原来html文件载入了1.css和1.js两个文件。我需要取消这两个文件，使用新的更改的脚本和样式来替换它，不以重新加载文件的形式，而是以字符串的形式。

追答

动态创建dom对象
比如
contentWindow.document.createElement
contentWIndow.document.body.appendChild()

参考技术A 读取文本全部 用回车 \n 做分隔符,javascript替换iframe的src...

其实把1.txt的内容写到一个js文件里面做成数组式 用javascript+ajax调用或替换iframe会好点...个人意见
追问

请问，iframe可以以post方式发送参数吗？怎样弄呢？

参考技术B 可以，使用
contentWindow来获取iframe的window对象

如
<iframe id="aaa"></iframe>
...
document.getElementById("aaa").onload = function()
alert(document.getElementById("aaa").contentWindow.document.body.innerHTML);
;

如何使用 JavaScript 删除 iFrame 中的 HTML 元素

【中文标题】如何使用 JavaScript 删除 iFrame 中的 HTML 元素

【英文标题】：How to delete HTML Elements in an iFrame using JavaScript

【发布时间】：2015-10-26 19:02:31

【问题描述】：

我有一个 iFrame 和一个包含内容的 div。我想通过 JavaScript 删除 div，这可能吗？我该怎么做？

我不想只是不显示它（例如，display: none 通过 CSS），而是从网站的 HTML 中删除它。我有 JavaScript 的基本知识，但没有任何使用 iFrame 的经验。

【问题讨论】：

看看这里：***.com/questions/11658011/…。另请记住，您不能将存在于不同主机/域上的 iframe 的内容修改为父页面 - developer.mozilla.org/en-US/docs/Web/Security/…

【参考方案1】：

你可以使用

$("#iFrameId").contents().find("#yourDiv").empty();

最好使用remove()

例如：$("#iFrameId").contents().find("#yourDiv").remove();

说明

empty() 将删除选择的所有内容。

remove() 将删除所选内容及其内容以及与之关联的所有事件处理程序。

供参考： 1)http://api.jquery.com/remove/ 2)http://api.jquery.com/empty/

【讨论】：

我理解它应该是 remove() 而不是 empty()，但我不确定预期的行为是什么

是的，在这种情况下 remove() 是比 empty() 更好的选择！！谢谢！

我已经尝试过了，它适用于普通的“iframe”，但不适用于spreadshirt 商店集成。您可以在以下位置查看示例商店：developer.spreadshirt.net/display/spreadShop/… 在 Out of the Box Shop 示例中向下滚动。我只想删除页脚，但是当我使用 $("#footer").remove();什么都没有发生。

当我尝试 $("#footer").remove();在他们的网站 (developer.spreadshirt.net/display/spreadShop/…) 上在线，它会删除页脚。但不是当我在本地尝试时。我正在本地测试它，但我在线，我无法删除页脚。是因为我在“本地”测试它还是因为他们的脚本正在加载，也许我必须在他们的脚本之后执行删除脚本？

当我在本地测试站点并在 firebug 控制台中添加代码时，我可以删除页脚，但是当我在 HTML 文档中尝试时，我无法删除页脚。我已经在我的服务器上对其进行了实时测试，并且在控制台中编写了相同的问题代码没问题，html中的代码执行没有机会删除页脚。所以现在怎么办？我试图结合 jquery .ready 函数但没有。为什么控制台方法有效，而不是 html 中的代码？

【参考方案2】：

您可以尝试以下方法：-

frame.removeChild(//pass div id here);