How can i control page throught javascript inside an iframe of that page?

Question

Hi all, I have an iframe with Js code to run, and i wan't to control the iframe DOM options and css style.
How can i do it? If you wan't to use jQuery, thats ok, but i preffer pure javascript...

Things that i want to modify:
- frameborder
- css styles (float, display, position, overflow)
- no scrolling bar

EDIT: The code run's inside the iframe

Thanks

Answer 1

I assume from your previous questions that the document inside the iframe is not on the same domain as the outlying page.

In that case, your options are extremely limited, again because of the Same Origin Policy. You will not have Javascript access to the elements or CSS of the outlying page. That includes the <iframe> element on that page.

Any design decisions you will therefore have to put inline into the iframe tag:

<iframe frameborder="0" style="float: left; width: 500px; height: 200px ....">

I think that applies to everything you mention except the scroll bar behaviour: That you can control inside the iframe document using the body element's overflow property.

The only alternative idea that comes to mind is have the sites that embed your iframe also include a style sheet that comes from your domain in the head section of the document. That CSS you would, of course, fully control.

If you limit the design rules in that CSS to your iframe (e.g. by using the #id selector), that would work as well. The downside is that if the style sheet does not get included, your iframe will break. This is why most providers of widgets use inline CSS.