8

I do have an iframe inside my webpage, but i want to change the css / font styles etc.

<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?

4

2 回答 2

19

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

但是,如果您想动态更改样式iframe在您自己的域上加载页面,您可以使用 jQuery 执行此操作:

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

如果iframe加载了另一个域上的页面,那么您就不走运了,请点击此链接,您可以在其中阅读一下为什么这不起作用。

如果您使用的是 HTML5,则可以使用postMessage在页面和iframe.

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

于 2013-05-20T21:32:38.020 回答
5

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

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

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

于 2013-05-20T21:26:30.327 回答