iframe更改内容CSS样式[重复]

Posted 2023-02-22

【中文标题】iframe更改内容CSS样式[重复]

【英文标题】：Iframe Change Content CSS Style [duplicate]

【发布时间】：2013-05-15 13:08:34

【问题描述】：

我的网页中确实有一个 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 样式？

【问题讨论】：

iframe src 在您的域中吗？如果是这样，您可以使用标准 CSS 来处理它，如果不是……那么您将无能为力。

将样式表引用放在 iframe 上。

***.com/questions/6494721/…

【参考方案1】：

如果iframe 在您自己的域中加载页面，并且您想静态地更改iframes 样式，您可以只更改样式规则在 CSS 文件中，这就是 @Justin808 所指的内容。

但是，如果您想动态地更改样式，并且iframe 会在您自己的域中加载页面，您可以使用 jQuery 来做到这一点：

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

如果 iframe 加载了另一个域上的页面，那你就倒霉了，请关注 this link，在那里你可以阅读一下为什么这不起作用。

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

@crdunst 的解决方案将起作用如果您对 iframe 内的页面具有“编辑权限”，以便您可以对其进行编辑以了解参数被传递给它，然后让它作用于这些参数。它不像使用 jQuery 那样动态，因为它只允许您通过在 iframe 中重新加载页面并传递另一组参数来更改样式。

【讨论】：

我试试 jQuery，谢谢，

它对我不起作用:(

【参考方案2】：

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

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

然后在 iframe 页面中，检查值并根据这些值添加样式