如何从 iframe 内容中的 div 中删除类答案

【问题标题】：How to remove class from div inside iframe contents如何从 iframe 内容中的 div 中删除类
【发布时间】：2021-11-19 23:53:39
【问题描述】：

我有这个结构，我想从div 中删除test2 类

iframe1 -> iframe2 -> <div class="test1 test2">.... </div>

我可以访问 iframe2，但在第二个 iframe 中找不到上面的 div。

这是我尝试过的

document.querySelectorAll('iframe').forEach(item => {
            var y = item.contentDocument.body.getElementsByTagName("iframe");
            setTimeout(() => {
                y[0].style.width = '100vw'; 
                $(y[0]).contents().find(".test2").removeClass('.test2')
            }, [500])
        })

y[0].style.width = '100vw';

这是有效的。但我无法找到 test2 类的 div

console.log(y[0]) 是预期的 iframe。

y[0].contentDocument 为空

如果有人可以帮助我解决这个问题。提前致谢

此外，在一些答案中，我发现如果 iframe 是跨源的，我们无法更改它的内容。但在这里我有相同的起源。

我只想要一些 css 更改，要么我需要删除 test2 类或覆盖它。

【问题讨论】：

我正在使用 setTimeout，因为 iframe2 没有立即加载
幸运的是我们不能。唯一可能的情况要求您拥有父页面和 iframe，在这种情况下，您必须通过消息系统。但在所有情况下都禁止直接访问。
你会想要使用正确的.removeClass() 语法，你有'.test2'。这是不正确的。您想使用类名，而不使用 .。
这也行不通。当我尝试执行 console.log($(y[0]).contents().find(".test)) 我得到了这个。S.fn.init [prevObject: S.fn.init(0)] length: 0 prevObject: S.fn.init(0) length: 0 prevObject: S.fn.init(1) 0: iframe
如果我没看错，iframe2 嵌套在iframe1 中，对吗？如果是这样，则必须在找到并获取iframe1 的内容后，再查找并获取iframe2 的内容。您的脚本没有深入到找到正确的内容。

标签： javascript html jquery iframe

【解决方案1】：

假设一个像下面这样的模拟结构，都具有相同的 Origin：

index.html

<body>
  <iframe id="iframe1" src="index2.html"></iframe>
</body>

index2.html

<body>
  <iframe id="iframe2" src="index3.html"></iframe>
</body>

index3.html

<body>
  <div class="test2">Foo</div>
</body>

您需要以下令人困惑的代码。

var f1 = $("#iframe1");
var f2 = $("#iframe2", f1.contents());
var target = $(".test2", f2.contents());
target.removeClass("test2");

这是基于以下内容：Selecting an element in iframe with jQuery

【讨论】：

我试过上面的代码，这不是删除类。可能是因为在我的问题<div class="test1 test2"> 中提到的 div 上有多个类
@Abhi no .removeClass() 不受此影响。运行代码时是否在控制台中看到任何错误？
没有错误。当我尝试执行 console.log(target) 时，我得到了类似S.fn.init [prevObject: S.fn.init(0)]
@Abhi 请提供一个可重复的最小示例：stackoverflow.com/help/minimal-reproducible-example