I'm loading an iFrame and want the parent to automatically change the height based upon the height of the iFrame's content.
To simply things, all pages belong to the same domain, so I shouldn't run into cross-site scripting issues.
Unfortunately, there's no answer there.
Allan
2008-10-29 15:03:23
A:
I can't test this and it's been a while since I've messed with iframes. Try removing the height/width and letting it autosize itself. It might size to content like a normal block level container would, but again, not sure.
Cheers and g'luck!
thismat
2008-10-29 15:01:03
+11
A:
On any other element, I would use the scrollHeight of the DOM object and set the height accordingly. I don't know if this would work on an iframe (because they're a bit kooky about everything) but it's certainly worth a try.
Edit: Having had a look around, the popular concensus is setting the height from within the iframe using the offsetHeight:
function setHeight() {
parent.document.getElementById('the-iframe-id').height = document['body'].offsetHeight;
}
And attach that to run with the iframe-body's onLoad event.
Oli
2008-10-29 15:06:31
This isn't working for me. Just to be clear, should setHeight() be defined WITHIN THE IFRAME HTML? But the-iframe-id is the id of the iframe as defined within the main page html?
AP257
2010-10-01 19:50:25
A:
Oli has a solution that will work for me. For the record, the page inside my iFrame is rendered by javascript, so I'll need an infinitesimal delay before reporting back the offsetHeight. It looks like something along these lines:
$(document).ready(function(){
setTimeout(setHeight);
});
function setHeight() {
alert(document['body'].offsetHeight);
}
Allan
2008-10-29 15:21:51
+1
A:
In IE 5.5+, you can use the contentWindow property:
iframe.height = iframe.contentWindow.document.scrollHeight;
In Netscape 6 (assuming firefox as well), contentDocument property:
iframe.height = iframe.contentDocument.scrollHeight
TimeSpace Traveller
2008-10-29 15:24:57
A:
Actually - Patrick's code sort of worked for me as well. The correct way to do it would be along the lines of this:
Note: there's a bit of jquery ahead:
if ($.browser.msie == false) {
var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
Allan
2008-10-29 18:12:21
A:
This solution worked best for me. It uses jQuery and the iframe's ".load" event.
craigmoliver
2009-03-26 18:45:07
A:
At all times I get a "Access Denied" when executing anything from outside the Iframe and from within the Iframe (as described above). It seems modern browsers are very aware of cross-domain issues and block any attempt to resize an Iframe where the domains don't match up (https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript).
Sebastiaan
2010-02-11 17:23:08
A:
I just happened to come by your question and i have a solution. But its in jquery. Its too simple.
$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );
There you go!
Cheers! :)
Edit: If you have a Rich Text Editor based on the iframe method and not the div method and want it to expand every new line then this code will do the needful.
Shripad K
2010-06-03 15:28:28
+1
A:
Here is a dead simple solution that works on every browser and with cross domains:
First, this works on the concept that if the html page containing the iframe is set to a height of 100% and the iframe is styled using css to have a height of 100%, then css will automatically size everything to fit.
Here is the code:
<head>
<style type="text/css">
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>
<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>
Sky
2010-08-11 01:39:12
Does that also work when the iframe is not a direct child of the body but, say, a div (on all browsers, that is)?
Aaron Digulla
2010-08-11 07:22:19
Yes it does - just set the div's height and width using css and then put the iframe inside your div and voila there should only be one set of scrollbars (unless you set the div to be 100% of the height of the page).
Sky
2010-08-11 23:26:02