Jump to content

Iframe height using JS?


Recommended Posts

Hi! I'm looking for a javascit that would help me solve my problem.I have a html page, which has an iframe, which leads to a php osCommerce site. Problem is that the php has various heights and the iframe doesn't know how to work with that. I read that there might be a javascript out there that would solve this, so if anyone has any idea, please let me know.Would maybe dumentwrite( do it?Thanks in advance!

Link to comment
Share on other sites

You can use the DOM to set the height in java script:HTML

<iframe id="myIFrame"></iframe>

javascript (option 1)

document.getElementById("myIFrame").height = "400";

javascript (option 2)

document.getElementById("myIFrame").style.height = "400px";

Check out the DOM tutorial for more information:http://www.w3schools.com/htmldom/prop_iframe_height.asp

Link to comment
Share on other sites

Thanks for your reply!But will that automatically resize the iframe?Maybe I explained it wrong - the main (html) page stays the same. Inside it is an iframe that changes because the php inside changes height.I have found this:


I tried it but for some reason, the height of the iframe is about 150px (even though I didn't apply that height to anything) and it doesn't change when you click on things in the iframe.I also put the javascript in a .js file to the make the html clearer (this has no influence on the end result).Here's my site:


Link to comment
Share on other sites

[W]ill that automatically resize the iframe?
No, it won't.I haven't tried this, mainly because I don't have too many opportunities to work with iframes, but you might try something along the lines of this (partly taken from http://xkr.us/articles/dom/iframe-document/):
// Get a reference to your iframe element.var iframe = document.getElementById("myIFrame");// Next, get a reference to the iframe's document elementvar doc = iframe.contentWindow || iframe.contentDocument;if(doc.document){	doc = doc.document;}// Next, (haven't tested this), get the height of the documentvar height = doc.offsetHeight;// Finally, set the height of the iframe.iframe.style.height = height + "px";

If that code works, then the only trick left would be to have that code execute each time the iframe's src changed (i.e. when a user clicks on a link to change the iframe).I hope it helps.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...