?
Solved

Iframe heights in javascript ie9

Posted on 2011-10-27
8
Medium Priority
?
1,118 Views
Last Modified: 2012-05-12
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"
0
Comment
Question by:staleb
  • 4
  • 4
8 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 37042630
Do you mean to pass the np object to the calcHeights function in your 2nd script?
0
 

Author Comment

by:staleb
ID: 37043177
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
0
 
LVL 43

Expert Comment

by:Rob
ID: 37054449
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

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:staleb
ID: 37055332
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"
0
 
LVL 43

Expert Comment

by:Rob
ID: 37067759
Have a look at this as the iframe resizes as you resize the page

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

Author Comment

by:staleb
ID: 37069497
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.

0
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 37072931
I've updated the link to show you how to add the iframe dynamically
0
 

Author Closing Comment

by:staleb
ID: 37092524
Thanks, this helped to solve my problem
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question