Solved

cross browser iframe auto resixe script/solution

Posted on 2008-10-18
21
947 Views
Last Modified: 2010-07-08
*Please don't submit a googled cut and snip solution. Please only submit one that you have tested and it works*

Need a tried and true cross browser Iframe auto resize script. Googled solutions so far have not worked.

My IFrame:

<iframe name="bodyframe" src="../site_flash/privacypolicyu.htm" height="680" width="758" SCROLLING=NO frameborder="0"  >
0
Comment
Question by:Wanderinglazyeye
  • 11
  • 10
21 Comments
 
LVL 16

Expert Comment

by:sh0e
ID: 22749353
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23826632.html
I just rewrote part of a script for someone else here trying to do the same thing.

Anyhow, this is how I would code it.  Tested on WebKit, IE6, FireFox 3.
<iframe name="bodyframe" src="../site_flash/privacypolicyu.htm" height="680" width="758" SCROLLING=NO frameborder="0"  onload="resizeIframe(this)"> 
<script type="text/javascript">
function resizeIframe(name) {
      i=name;
      ih = i.document ? i.Document.body.scrollHeight : i.contentDocument.body.scrollHeight;
      i.style.height = ih + 5 + "px";
}
</script>

Open in new window

0
 
LVL 16

Expert Comment

by:sh0e
ID: 22749367
Sorry, I pasted the wrong code.  My editor has been glitching on me a lot lately.
<script type="text/javascript">
function resizeIframe(name) {
      i=name;
      ih = i.document ? i.Document.body.scrollHeight : i.contentDocument.body.scrollHeight;
      i.style.height = ih + 5 + "px";
}
</script>
 
 
<iframe name="bodyframe" src="../site_flash/privacypolicyu.htm" height="680" width="758" SCROLLING=NO frameborder="0"  onload="resizeIframe(this)"> 

Open in new window

0
 

Author Comment

by:Wanderinglazyeye
ID: 22758381
The firefox browser isn't displaying the iframe.

I put the script in the head section and the iframe line in the body. I am getting an ivalid markup for that line in Dreamweaver??

Says marked invalid becuase its overlapping or unclosed...
<iframe name="bodyframe" src="../site_flash/index_i.htm" height="680" width="758" SCROLLING=NO frameborder="0"  onload="resizeIframe(this)">  

Open in new window

0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 16

Expert Comment

by:sh0e
ID: 22759057

<script type="text/javascript">
function resizeIframe(name) {
      i=name;
      ih = i.document ? i.Document.body.scrollHeight : i.contentDocument.body.scrollHeight;
      i.style.height = ih + 5 + "px";
}
</script>
 
 
<iframe name="bodyframe" src="../site_flash/privacypolicyu.htm" height="680" width="758" SCROLLING=NO frameborder="0"  onload="resizeIframe(this)"></iframe>

Open in new window

0
 

Author Comment

by:Wanderinglazyeye
ID: 22759321
Hi Shoe,

Its still cutting off part of the webpage in the IFrame. Its not sizing it for the whole page...

By specifying the height and width in the Iframe is this messing up the script?
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22763892
No, it should have no effect on the script.
I have tested the script without problem.  Is it possible for you to show me a demo site for which you are having trouble?
0
 

Author Comment

by:Wanderinglazyeye
ID: 22767515
I am in the process of setting up the testing account. It will be within 24 hours. In the mean time is there any other way you can evaluate this? The source code is being written in DW. I can post or send the file, or we can wait until the test site is up - either.
0
 

Author Comment

by:Wanderinglazyeye
ID: 22769313
Here it is:

www.xf-fps.com/index.html

Please ignore the 404 error below.
0
 

Author Comment

by:Wanderinglazyeye
ID: 22769395
See,its cutoff at the bottom...
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22770516
<iframe name="bodyframe" src="../privacypolicyu.htm" height="680" width="758" scrolling="no" frameborder="0" onload="resizeIframe(this)" ></iframe>

The page has a typo, missing the closing quote.
0
 

Author Comment

by:Wanderinglazyeye
ID: 22771396
Still not functioning correctly. Check the code at the site again...should I substitute name in the script with the I frame name?

www.xf-fps.com/index.html (updated)
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22771946
Apparently, the FF part I wrote wasn't working right.
May break when browser developers feel like messing with DOM names again.

<script type="text/javascript">
function resizeIframe(name) {
      i=name;
      ih = i.document ? i.document.body.scrollHeight : i.contentDocument.body.innerHeight + i.contentWindow.scrollMaxY;
      i.style.height = ih + 5 + "px";
}
</script>
 
<iframe name="bodyframe" src="privacypolicyu.htm" height="680" width="758" SCROLLING=NO frameborder="0"  onload="resizeIframe(this)"> 

Open in new window

0
 

Author Comment

by:Wanderinglazyeye
ID: 22773164
Well at least the page is displaying, but in firefox the iframe is only 1/2 the size of the real page size. So is it possible that IFrames only fo down so far anyway? The web page the Iframe is loading really is like 2 web pages long.
0
 

Author Comment

by:Wanderinglazyeye
ID: 22773192
Its still constrained to the heigth width dimensions in the iframe statement. If you put the words "test" under the iframe, it never leaves the same position. The size of the iframe is always the same.
0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22773417
Ya, I made another goof.  This time for real.  I commented it and everything to make sure I was using the working version.  I really need a better editor.

This one will work.
<script type="text/javascript">
function resizeIframe(i) {
    if(i.Document) //IE
		i.style.height = i.Document.body.scrollHeight;
	else if(i.contentWindow){
		if(i.contentWindow.innerHeight && i.contentWindow.scrollMaxY) //FF
			i.height = i.contentWindow.scrollMaxY + i.contentWindow.innerHeight;
		else if(i.contentWindow.document.height) //WebKit
			i.height = i.contentWindow.document.height;	
		else //all else fails
			i.height = i.contentWindow.document.body.scrollHeight;
	}
}
</script>
<iframe src="test.html" onload="resizeIframe(this)" scrolling="no"></iframe>

Open in new window

0
 
LVL 16

Expert Comment

by:sh0e
ID: 22773427
I didn't realize I was testing two separate versions of my code in FF and IE, one that worked in each browser.
So I ended up posting different code that only work for one browser.
So I just junked the whole thing and rewrote it again verbosely.
0
 

Author Comment

by:Wanderinglazyeye
ID: 22782703
In FF--> the Iframe goes the whole length of the page (yeah!) BUT its cutoff at 1/2 its width

in IE-->doesn't work at all

0
 

Author Comment

by:Wanderinglazyeye
ID: 22782886
!! Update, I manually set the width and now it works *great*in FF - no prob.

However in IE, doesn't work.
0
 
LVL 16

Assisted Solution

by:sh0e
sh0e earned 500 total points
ID: 22783141
Sigh.  IE7 right?
Add this to resizeIframe().  The style height: 25px is confusing IE7.
if(i.Document) aa.contentWindow.document.getElementById('content3').parentNode.style.height="auto";

Open in new window

0
 

Author Comment

by:Wanderinglazyeye
ID: 22785073
Well, not at least IE shows something and FF is working correctly.

But IE is still not rolling it all the way out.

But that begs a bigger question, whether to use a resizing script at all. It seems its prone to malfunction and a browser upgrade may throw it into oblivion for your site. I am inclined to just fix the iframe height at a a standard at this point just out of concern for future functionality. What say you?

0
 
LVL 16

Assisted Solution

by:sh0e
sh0e earned 500 total points
ID: 22791922
I would recommend you do that, or at least until a standard is agreed on for scrollHeight and company.
On the upside IE8 appears to work with this code.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

827 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