时间戳

首页 > 解决方案 > 如何从 iframe 内容中的 div 中删除类

javascript - 如何从 iframe 内容中的 div 中删除类

问题描述

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

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 类或覆盖它。

标签： javascripthtmljqueryiframe

解决方案

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

索引.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");

这基于以下内容：使用 jQuery 选择 iframe 中的元素

推荐阅读