Solved

Iframe resizing problem in Firefox X

Posted on 2008-10-18
7
532 Views
Last Modified: 2012-05-05
Hi experts,

I am building a web site that uses Iframes. In IE, there is no problems resizing the iframe by using a javascript triggered by a "body onload" call function.

The problem is, in firefox - nada ! it's just not working and I can't figure how to adapt the code in order to make it work !

Here is what I have in my head portion of the page that goes in the iFrame.

<script type="text/javascript">
function resizeIframe() {

      // Must launched on the body onload event handler for IE
      // Use document.documentElement if you are in Compat mode
      i = parent.document.getElementById(window.name)
      iHeight = document.body.scrollHeight
      i.style.height = iHeight + 5 + "px"
}
</script>

This is my trigger

<body onLoad="redim()">

And this is my iframe

<iframe src="myform.asp" id="MainBody" name="MainBody" style="overflow-x:hidden;width:492px;height:auto;" frameborder=0 allowtransparency="true" scrolling="no"> </iframe>

Any suggestion ?
0
Comment
Question by:SirTKC
  • 4
  • 3
7 Comments
 
LVL 16

Expert Comment

by:sh0e
ID: 22749222
That code doesn't appear as if it would work in any browser.
Why are you referring to the parent in the parent page?
That script should be inside the iframe.

The below code is the closest I could get to what it seems you want.
test.html is the parent
testt.html is the iframe
--test.html--

<script type="text/javascript">

function resizeIframe(name) {
 

      // Must launched on the body onload event handler for IE

      // Use document.documentElement if you are in Compat mode

      i = parent.document.getElementById(name)

      iHeight = i.document.body ? i.Document.body.scrollHeight : i.contentDocument.body.scrollHeight

	  alert(iHeight);

      i.style.height = iHeight + 5 + "px"

	  

}

</script>
 

This is my trigger
 

<body onLoad="">
 

And this is my iframe
 

<iframe src="testt.html" id="MainBody" name="MainBody" style="overflow-x:hidden;width:492px;height:500;" frameborder=0 allowtransparency="true" scrolling="no"> </iframe>
 

Any suggestion ?
 

--testt.html--

<body onload="parent.resizeIframe(window.name);">

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

</body>

Open in new window

0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22749234
Sorry, copy/pasted the wrong files above.  Been doing that a lot lately.
---test.html---

<script type="text/javascript">

function resizeIframe(name) {

      // Must launched on the body onload event handler for IE

      // Use document.documentElement if you are in Compat mode

      i = parent.document.getElementById(name)

      iHeight = i.document ? i.Document.body.scrollHeight : i.contentDocument.body.scrollHeight

      alert(iHeight)

      i.style.height = iHeight + 5 + "px"

}

</script>

This is my trigger
 

<body onLoad="">
 

And this is my iframe

<iframe src="testt.html" id="MainBody" name="MainBody" style="overflow-x:hidden;width:492px;height:500;" frameborder=0 allowtransparency="true" scrolling="no"> </iframe>
 

Any suggestion ?
 

---testt.html---

<body onload="parent.resizeIframe(window.name);">

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

Any suggestion ?<br>

</body>

Open in new window

0
 
LVL 3

Author Comment

by:SirTKC
ID: 22749321
Hi sh0e,

It works well just like before in IE.
I like the alert that returns the iFrame height in this JavaScript.
But what's curious is that I get "883" (certainly pixels) in IE and only "19" in Firefox !?

You see, resizing is not working... :-/

I have read on certain forums that dynamic content such as ASP or PHP seem to be very problematic with this approach. Also, it as to be a content that is located on the same domain (which is is this case). Do you think it has anything to do with it ?

Thanks for your help on this one.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 16

Expert Comment

by:sh0e
ID: 22749374
What version of firefox are you using?  I tested the code on FF 3.0.3, WebKit, IE6.
0
 
LVL 3

Author Comment

by:SirTKC
ID: 22749449
I do have Firefox 3.0.3 But like I said, the content of the Iframe is an ASP form approx. 1500 px height.
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22749469
Does my sample code (verbatim) render properly on your browsers?  It should work under FF 3.0.3.
I may need to see more of your code, or a demo site preferably, to help you.
0
 
LVL 3

Author Closing Comment

by:SirTKC
ID: 31507448
Hi sh0e

Yes your piece of code is working just fine. Matter of fact, I am using it now on all our website. The credit is yours !

In order to get it work smooth and easy, I had to remove this "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">" from all pages who's displayed in the iFrame

And boom voila !!

Points are yours !
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now