Question

我正在尝试制作一个css选择器，根据天气，html是否在iframe中分配不同的属性。我试过这个：

html:not(:root) body {
    background: black !important;
}

我希望这会将background: black;应用于正文，如果它在iframe中，但它没有，为什么？有没有css选项？如果html是root，我总是可以用javascript检查。

IE8支持不需要支持。

Answer 1

CSS仅限于同一文档中。 iframe本身就是一个完整的文档，因此适用于包含的页面的CSS规则iframe无法应用于中iframe的页面。< / p>

这意味着就HTML和CSS而言，html 总是 :root（因此永远不会成为{{1} }}）。

除非你能够将这个CSS从包含页面转移到iframe中的页面（例如使用脚本），否则我认为没有办法只使用CSS。

Answer 2

可能可以使用JavaScript在iframe中进行样式化。

document.querySelector('iframe').contentDocument.body.querySelector('#some-element').style.background-color = 'red';

重要提示：确保iframe位于同一个域中，否则无法访问其内部。那将是跨站点脚本。

使用JavaScript文档访问iframe内的元素：Javascript - Get element from within an iFrame

Answer 3

发布我的评论作为更好显示的答案，您应该：

在JS中放入“在iframe中”检测代码，因为我看不到任何其他方式
根据JS结果将CSS代码放入iframe中

因此，如果所有代码都位于iframe中，请执行以下操作：

if (window.parent !== window) {
    document.documentElement.classList.add('inside-iframe');
}

html.inside-iframe {
    bkacground-color: black;
}

如果要将检测JS代码放在父框架中，请进行以下操作：

document.querySelectorAll('iframe')
    .forEach(i => i.contentDocument.documentElement.classList.add('inside-iframe'));

假设执行此JS时已加载iframe（否则，contentDocument / documentElement将不存在）。在这种情况下，您可以依赖iframe的load事件（但无论如何，最好还是将“ is-in-iframe”检测值添加到iframe本身，因为相应的CSS也在iframe内）< / p>

Answer 4

html:not(root) body {
    background: black !important;
}

作品

当html文档在iframe中时的Css选择器？

4 个答案: