Iframe更改内容CSS样式

Question

我的网页中有一个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>

如何覆盖iframe内容的CSS样式？

- Jeremi Liwanag

---

iframe 的 src 是否在你的域名下？如果是，你可以使用标准的 CSS 对其进行修改，如果不是……那么你就无能为力了。 - Justin808

将样式表引用放在 iframe 上。 - user1

https://dev59.com/Vmw15IYBdhLWcg3wntKh - zavg

Answer 1

如果iframe加载的页面是你自己的域名，并且你想要静态地更改iframe的样式，那么你只需要更改CSS文件中的样式规则，这就是@Justin808所说的。

但是，如果你想要动态地更改样式，并且iframe加载的页面是你自己的域名，你可以使用jQuery实现：

$("iframe").contents().find("element-selector").css("border-color", "blue");

如果iframe加载了另一个域上的页面，那就没有办法了，请访问此链接，了解一下为什么它不起作用。

如果您使用HTML5，可以使用postMessage在页面和iframe之间进行通信。

@crdunst的解决方案将适用于你能够编辑iframe内部页面以理解传递给它的参数并根据这些参数执行操作的情况。与使用jQuery相比，它不太灵活，因为它只允许您通过重新加载iframe内的页面并传递另一组参数来更改样式。

- Mathijs Flietstra

---

我会尝试使用jQuery，谢谢。 - Jeremi Liwanag

它对我不起作用 :( - mina morsali

Answer 2

我不确定用户2146515所指的是否是这个，但如果您可以访问iframe内部的页面，您可以通过url传递值，然后在iframe内容中使用这些值：

<iframe src="http://www.youriframecontent.com?bg=ffffff&text=000000"></iframe>

然后在 iframe 页面内，检查该值并根据该值添加样式

- crdunst