CODEWITHSUNDEEP
htmlcssiframe
Ruthreshwar
Ruthreshwar

Reputation: 1841

How to set iframe style from inner html

I have the following line of code

<iframe src="http://www.google.com" name="google" style="Z-INDEX: 0; MARGIN-TOP: -1px; WIDTH: 100%; HEIGHT: 1070px">
    <html>
         <head></head>
         <body>
             <div>Some image is here</div>
         </body>
    </html>
</iframe>

The problem is the iframe is not visible in IE7. The iframe is visible only if I add the style display: block;

I dont have access to modify the style top iframe but I can modify the inner html.

How do I set the style of top iframe from my html page ?

Upvotes: 1

Views: 1806

Answers (2)

user2496033
user2496033

Reputation:

Try this.

<iframe id="f" width="200" height="200"></iframe>


----------
var s = document.getElementById('f');
s.contentDocument.write("welcome");

Upvotes: 0

Roy M J
Roy M J

Reputation: 6948

The Iframe content is subject to the same-domain policy. If it's from your domain, you can control it, if not, you're locked out. This prevents all kinds of Iframe-based page hijacking.

Considering you have direct access, do the following :

You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.

Remember, the same origin policy applies, so you can only do this to iframe is coming from your own server.

I use the Prototype framework to make it easier:

frame1.$('mydiv').style.border='1px solid #000000'

or

frame1.$('mydiv').addClassName('withborder')

Upvotes: 1

Related Questions