asked on

Iframe heights in javascript ie9

I have a scripts.aspx with several common functions
One of them is to create a Iframe and fill it with its content.

The problem is that in IE9 the height gets all messed up.
If I use compability view it works fine.
And in Html I solved it like this:

iframe id="PageStart" frameborder="0" onload="calcHeight();" height="1" width="100%"/>

function calcHeight() {
//find the height of the internal page
var the_height =
document.getElementById('PageStart').contentWindow.
document.body.scrollHeight + 20;

//change the height of the iframe
document.getElementById('PageStart').height =
the_height;
}

But in Scripts.aspx the code is like this:

var pageContainer = document.all['Pages'];
var np = document.createElement("iframe");
np.id = 'page_' + SelValue + '_' + (bForceUseExisting ? '': tabCounter);
np.style.borderStyle = 'solid';
np.style.borderWidth = '0px';
np.style.frameBorder = 'not';
np.style.border = '0px';
np.style.heigt = '1';

np.style.width='100%';
np.scrolling ='auto';
// add the new page (visible)
pageContainer.insertAdjacentHTML('beforeEnd', np.outerHTML);
np.onload = calcHeights(np);

How can I get the same effect of the last code as the first.
When I run the last code I get:
"Unable to get value of the property 'ScrollHeight': object is null or undefined"

Rob

Do you mean to pass the np object to the calcHeights function in your 2nd script?

staleb

ASKER

I'm not sure what the right ting to send is.
If I try to send: np.onload = calcHeights(np.id);

I get the same error.

The only reason I send something is that in the first example the name of the Iframe is predefined,
but in scripts.aspx the names are generated

Rob

calcHeights doesn't accept any arguments so by passing the id will not do anything.

if you want it to do that you will need to modify the function like this

function calcHeight(p_id) {
	//find the height of the internal page
	var the_height = document.getElementById(p_id).contentWindow.
	document.body.scrollHeight + 20;
	document.getElementById(p_id).height = the_height;
}

Open in new window

staleb

ASKER

Sorry, my mistake I Copied the function from the html page, not scripts.aspx. In that page the function has a parameter
function calcHeights(np).

the problem seems to be that the Iframe doesnt exists when I try :
contentWindow.document.body.scrollHeight
since I get the error:
"Unable to get value of the property 'ScrollHeight': object is null or undefined"

Rob

Have a look at this as the iframe resizes as you resize the page

http://jsfiddle.net/rjurd/fZqjf/

staleb

ASKER

This is Similar to my first example, where the Iframe is created in html and the name is static. The problem is when I create the Iframe in the script itself, and has to pass it to the function. I could probaly make an iframe in html and hide and use it as as standard to read out heights, but I didn't feel that that was the optimal solution.

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

staleb

ASKER

Thanks, this helped to solve my problem