Iframe Change Content CSS Style [duplicate]

Question

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?

Answer 1

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

However if you want to dynamically change the styles, and the iframe loads a page on your own domain, you could do this using jQuery:

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

If the iframe loads 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.

If you're using HTML5, you can use postMessage to communicate between the page and the iframe.

@crdunst's solution will work if you have "editing access" to the page inside the iframe so 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 iframe and passing it another set of parameters.

Answer 2

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:

<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