用于当 html 文档位于 iframe 内时的 CSS 选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21842373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css–selector for when a html-document is inside an iframe?
提问by Himmators
I'm trying to make a css-selector that assigns diffrent properites based on weather the html is inside an iframe or not. I tried this:
我正在尝试制作一个 css 选择器，它根据 html 是否在 iframe 内的天气分配不同的属性。我试过这个：
html:not(:root) body {
background: black !important;
}
I expect this to apply background: black;to the body if it's inside an iframe, but it doesn't, why? And are there any css options? I could always check with javascript if html is root.
background: black;如果它在 iframe 内，我希望这适用于身体，但它没有，为什么？是否有任何 css 选项？如果 html 是 root，我可以随时使用 javascript 检查。
IE8 support not requierd.
IE8 支持不需要。
回答by BoltClock
CSS is only scoped within the same document. An iframe is an entire document in its own right, and so a CSS rule that applies to the page that containsthat iframe cannot apply to the page that's withinthat iframe.
CSS 仅适用于同一文档。iframe 本身就是一个完整的文档，因此适用于包含该 iframe的页面的 CSS 规则不能应用于该 iframe内的页面。
This means that as far as HTML and CSS are concerned, htmlis always:root(and therefore can neverbe :not(:root)).
这意味着就 HTML 和 CSS 而言，始终html是（因此永远不可能是）。:root:not(:root)
Unless you are able to transfer this CSS from the containing page to the page within the iframe (using a script for example), I don't believe there is a way using just CSS.
除非您能够将此 CSS 从包含页面传输到 iframe 中的页面（例如使用脚本），否则我认为没有办法仅使用 CSS。
回答by ThorSummoner
It is probably possible to do the styling in an iframe with JavaScript.
可能可以使用 JavaScript 在 iframe 中进行样式设置。
document.querySelector('iframe').contentDocument.body.querySelector('#some-element').style.background-color = 'red';
IMPORTANT:Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.
重要提示：确保 iframe 位于同一个域中，否则您将无法访问其内部结构。那将是跨站点脚本。
Accessing elements inside iframes with JavaScript document futher here: Javascript - Get element from within an iFrame
在此处使用 JavaScript 文档访问 iframe内的元素：Javascript - 从 iFrame 中获取元素
回答by Xenos
Posting my comment as an answer for better display, you should:
发布我的评论作为更好显示的答案，您应该：
- Put "is in iframe" detection code in JS, as I don't see any other way of doing so
- Put CSS code inside the iframe depending on the JS result
- 将“在 iframe 中”检测代码放在 JS 中，因为我没有看到任何其他方式这样做
- 根据 JS 结果将 CSS 代码放入 iframe
So if all code is inside the iframe, do:
因此，如果所有代码都在 iframe 内，请执行以下操作：
if (window.parent !== window) {
document.documentElement.classList.add('inside-iframe');
}
html.inside-iframe {
bkacground-color: black;
}
If you want the detection-JS-code to be inside the parent frame, go for:
如果您希望检测 JS 代码位于父框架内，请执行以下操作：
document.querySelectorAll('iframe')
.forEach(i => i.contentDocument.documentElement.classList.add('inside-iframe'));
Assuming the iframe is loaded when executing this JS (otherwise, contentDocument/documentElement will not exist). You may rely, in such case, on loadevent of the iframe (but it seems better anyway to put "is-in-iframe" detection indise the iframe itself, as the corresponding CSS is inside the iframe too)
假设在执行这个 JS 时加载了 iframe（否则 contentDocument/documentElement 将不存在）。在这种情况下，您可能会依赖loadiframe 的事件（但无论如何最好将“is-in-iframe”检测放在 iframe 本身中，因为相应的 CSS 也在 iframe 内）
回答by webmister
html:not(root) body {
background: black !important;
}
Works
作品
