当 html 文档位于 iframe 中时的 CSS 选择器？

Question

我正在尝试创建一个 css 选择器，它根据 html 是否在 iframe 内的天气来分配不同的属性。我试过这个：

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

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

不需要IE8支持。

Answer 1

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

• 在 JS 中放入“is in 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 内）

Answer 2

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

作品

Answer 3

也许可以在 iframe 中使用 JavaScript 进行样式设置。

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

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

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

Answer 4

CSS 仅适用于同一个文档。 iframe 本身就是一个完整的文档，因此适用于 包含该 iframe 的页面的 CSS 规则不能适用于 in 该 iframe 的页面。

这意味着就 HTML 和 CSS 而言，html始终为:root（因此永远不会为:not(:root)）。 p>

除非您能够将此 CSS 从包含页面传输到 iframe 内的页面（例如使用脚本），否则我不相信有办法只使用 CSS。