Firefox 6 and Javascript: parent.document.getElementById('name').contentDocument.height not working
In my site I have a Javascript function that resizes the iframe. The part related to Firefox is the following:
var fr2 = parent.document.getElementById('name');
if(fr2.contentDocument) {
var doc1 = fr2.contentDocument;
h = doc1.height + 60;
if (h < 280)
fr2.style.height = "280px";
else
fr2.style.height = h + "px";
}
With Firefox 6 this does not work anymore. In particular, if I print the variable "h" I obtain NaN. Do you know what is changed?
Thanks, Fabrizio
Modified by cor-el
All Replies (3)
Hi Fabrizio,
Today I had the same problem and I did it to resolve: 1) Remove the http:// from the src=".." of tag iframe. Now object contentDocument going to exists. 2) IF you can't edit the main page which contains iframe, you can do this:
- on src of iframe page, insert:
<script type="text/javascript">
window.onload = function(){
top.document.getElementById('blockrandom').contentDocument['height'] = document.getElementsByTagName("body")[0].offsetHeight;
}
</script>
- Change "blockrandom" to your id iframe.
But, If you can edit the main page, you can use this method to get height of your page :
document.getElementById('blockrandom').contentDocument.body.scrollHeight
Where, again blockrandom is your id iframe.
I hope I have helped.
BR.
Modified by cor-el
Sorry, I forgot in the 'document.getElementsByTagName("body")[0].offsetHeight' to work you need set CSS tag body with height, like this:
<style type="text/css">
body {
height: 1000px;
}
</style>
BR.
Modified by cor-el
Hi and thanks for your reply! I can post my solution, that is a related directly to my problem.
The solution can be accessing the style of the body, parsing the height or the width (in fact, now they are no more a number like ‘60’, but something like ‘60px’) and use it. As an example, if the JavaScript code was:
var fr2 = parent.document.getElementById('name'); var doc1 = fr2.contentDocument; var h = doc1.height + 60; fr2.style.height = h + "px";
Now you have to do something like this (I am too verbose to simplify the comprehension):
var fr2 = parent.document.getElementById('name'); var doc1 = fr2.contentDocument; var body = doc1.getElementsByTagName('body')[0]; var h = parent.window.getComputedStyle(body, null).height; var length = h.length; h = h.substring(0, length-2); //remove px from the string h = parseFloat(h) + 60; fr2.style.height = h + "px";
Anyway, this does not work with previous versions, so you need an IF clause to check compatibility:
if (doc1.height) {
OLD CODE
} else {
NEW CODE
}