Geek Answers Handbook

Iframe Change Content CSS Style

I 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 to override CSS style for iframe content?

+8
javascript jquery html css
source share
2 answers

If the iframe loads the page in your own domain and you want to statically change the iframe styles, you can just change the style rules in the CSS file, this is what @ Justin808 says.

However, if you want to change styles dynamically, and iframe loads the page in your own domain, you can do this with jQuery:

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

If the iframe loads the page into a different domain, you are out of luck, follow this link where you can read a little about why this does not work.

If you are using HTML5, you can use postMessage to link between the page and the iframe .

@crdunst will work if you have "edit access" to the page inside the iframe so that you can edit it to understand the parameters passed to it, and then make them act on these parameters. This is not as dynamic as using jQuery, because it allows you to change styles by reloading the page inside the iframe and passing it another set of parameters.

+18
source share

I'm not sure if this is what user2146515 is talking about, but if you have access to the page in an iframe, you can pass the values ​​to url and then use these values ​​in your iframe content:

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

Then on the iframe page check the value and add styles based on these values

+5
source share

More articles:


All Articles