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

Question

我有一个包含内容的iFrame和div。我想通过JavaScript删除div，这是否可能？如果可以，怎么做？

我不想仅仅隐藏它（例如通过CSS的"display: none"），而是从网站的HTML中删除它。我对JavaScript有基本的了解，但没有使用iFrame的经验。

- adrinho

---

请看这里：https://dev59.com/mmgu5IYBdhLWcg3wASaO。同时请记住，您不能修改存在于不同主机/域的 iframe 的内容，与父页面无关 - https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy。 - nealio82

Answer 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/

- sahil gupta

---

我理解应该使用remove()而不是empty()，但我不确定期望的行为是什么。 - A. Wolff

是的，在这种情况下，remove()比empty()更好！谢谢！ - sahil gupta

我已经尝试过这个方法，对于普通的“iframe”它是有效的，但是在与Spreadshirt商店集成时却不行。您可以在以下链接查看一个示例商店：https://developer.spreadshirt.net/display/spreadShop/SpreadShop-Our+new+Partner+Shopsystem，请向下滚动到Out of the Box Shop Example。我只想删除页脚，但是当我使用$("#footer").remove();时，什么也没有发生。 - adrinho

当我在他们的网站（https://developer.spreadshirt.net/display/spreadShop/SpreadShop-Our+new+Partner+Shopsystem）上尝试使用$("#footer").remove();时，它会删除页脚。但是当我在本地测试时却没有效果。我正在本地测试，但我在线上，无法删除页脚。这是因为我在“本地”测试还是因为他们的脚本正在加载，也许我需要在他们的脚本之后执行删除脚本？ - adrinho

请参考此SO解决方案绕过同源策略的方法。 - sahil gupta

Answer 2

你可以尝试类似以下的内容：-

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

- Vineet Tyagi