jQuery iframe 更改内容 CSS 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16658609/
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
Iframe Change Content CSS Style
提问by Jeremi Liwanag
I do have an iframe inside my webpage, but i want to change the css / font styles etc.
我的网页中有一个 iframe，但我想更改 css/字体样式等。
<iframe name='iframe1' id="iframe1" src='<?php echo "http://micro.shoretel.com/www/?v=$version&s=$style&l=$logo&p=" . $_GET["p"] ?>' frameborder='0' width='660' height='450'></iframe>
How do i override the CSS style of the iframe's content?
如何覆盖 iframe 内容的 CSS 样式？
回答by Mathijs Flietstra
If the iframeloads a page on your own domain, and you want to staticallychange the iframes styles, you could just change the style rules in the CSS file, this is what @Justin808 is referring to.
如果iframe在您自己的域上加载页面，并且您想静态更改iframes 样式，则只需更改 CSS 文件中的样式规则，这就是@Justin808 所指的内容。
However if you want to dynamicallychange the styles, and the iframeloads a page on your own domain, you could do this using jQuery:
但是，如果您想动态更改样式，并iframe在您自己的域上加载一个页面，您可以使用 jQuery 执行此操作：
$("iframe").contents().find("element-selector").css("border-color", "blue");
If the iframeloads a page on another domain, you're out of luck, follow this link, where you can read up a bit on why that doesn't work.
如果iframe在另一个域上加载了一个页面，那么您就不走运了，请点击此链接，您可以在其中阅读有关为什么它不起作用的信息。
If you're using HTML5, you can use postMessageto communicate between the page and the iframe.
如果您使用的是 HTML5，则可以使用postMessage在页面和iframe.
@crdunst's solution will work if you have "editing access" to the page inside the iframeso that you can edit it to understand the parameters which are passed to it, and then make it act upon those parameters. It is not as dynamic as using jQuery as it only allows you to change styles by reloading the page inside the iframeand passing it another set of parameters.
如果您对其中的页面具有“编辑访问权限”，iframe@crdunst的解决方案将起作用，以便您可以编辑它以了解传递给它的参数，然后使其对这些参数起作用。它不像使用 jQuery 那样动态，因为它只允许您通过在其中重新加载页面iframe并向其传递另一组参数来更改样式。
回答by crdunst
I'm not sure if this is what user2146515 is referring to, but if you have access to the page within the iframe, you could pass values on the url, and then use those values within your iframe content:
我不确定这是否是 user2146515 所指的内容，但是如果您可以访问 iframe 中的页面，则可以在 url 上传递值，然后在 iframe 内容中使用这些值：
<iframe src="http://www.youriframecontent.com?bg=ffffff&text=000000"></iframe>
Then within the iframe page, check for the value and add styles based on those values
然后在 iframe 页面中，检查值并根据这些值添加样式
