使用 JavaScript 删除 iframe 中的 HTML 元素答案

【问题标题】：Removing HTML element in iframe with JavaScript使用 JavaScript 删除 iframe 中的 HTML 元素
【发布时间】：2020-03-22 21:14:17
【问题描述】：

我正在尝试从嵌入式 iframe（内联 iframe）中删除图像。 虽然有时有效，但有时会因错误而失败。我在 Chrome 上运行此代码。这种行为很奇怪。我在几个网站上尝试过，但找不到任何原因。

我想知道为什么它有时会失败并且有时所有参数都相同（我只是在控制台中执行此操作）。其次，如果可能的话，是否有替代解决方案？

$("#content_ifr").contents().find("img").remove();

有时会出现的错误信息：

未捕获的类型错误：无法读取 null 的属性“内容”

如果有帮助，我正在尝试使用 JavaScript 从 WordPress 页面编辑器（经典）中删除图像和额外内容。

【问题讨论】：

$("#content_ifr").find("img").remove(); 有用吗？
您是否在检查 iframe 是否正在加载
你在iframe onload活动中这样做
我在整个页面加载后在控制台中运行它。就像我说的，它有时有效，有时无效。 iframe 也是一个内联 iframe。
假设 iframe 是同源（意味着相同的 URL 域），这种行为的唯一原因是时间。您可能需要先检查元素是否真的存在以及它是否真的加载了。

标签： javascript jquery wordpress iframe google-chrome-extension

【解决方案1】：

正如您所说，它有时有效，有时无效。当它工作时，检查 Javascript 上下文。我遇到了我的代码与 DevTools 打开的问题，但如果我刷新页面，javascript 上下文将恢复为“顶部”，我需要在那个框架中。

[

【讨论】：

【解决方案2】：

原来是我的 Chrome 扩展程序干扰了这个。我们试图在 WordPress 网站上使用 Chrome 扩展程序运行此脚本。

将这些行更改为此有效：

jQuery("#content_ifr").contents().find("img").remove();

正如@Jason Owens 指出的那样，上下文出于某种原因切换。我注意到使用 'jQuery' 而不是 $ 似乎有效。我认为这是因为 Chrome 扩展使用标准 jQuery 作为依赖项。但是，'$' 不起作用 WordPress 使用 noConflict 来避免使用 '$' 符号，而是使用 'jQuery'。

【讨论】：

【解决方案3】：

我们无法从 iframe 中删除元素，但我们可以隐藏

试试这个：

$(document).ready(function(){
    $('#content_ifr').contents().find('img').hide();
});

【讨论】：