使用 JavaScript 删除 iframe 中的 HTML 元素

Posted 2023-05-09

【中文标题】使用 JavaScript 删除 iframe 中的 HTML 元素

【英文标题】：Removing HTML element in iframe with JavaScript

【发布时间】：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 域），这种行为的唯一原因是时间。您可能需要先检查元素是否真的存在以及它是否真的加载了。

【参考方案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();
);