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

Posted 2023-03-06

【中文标题】如何使用 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);