Topic: iFrames Height (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=9671" title="Pages that link to Topic: iFrames Height (Page 1 of 1)" rel="nofollow" >Topic: iFrames Height <span class="small">(Page 1 of 1)</span>\
 
KARN
Bipolar (III) Inmate

From: North Bay, Ontario, CA
Insane since: Apr 2001

 posted posted 08-06-2003 20:55

Is it possible to set the height of an iframe to the height of the content inside... like if it's another html that is often modify in length wise to make the iframe adjust itself to the height of the length...
KARN
Bipolar (III) Inmate

From: North Bay, Ontario, CA
Insane since: Apr 2001

 posted posted 08-06-2003 21:49

BTW i can't put any script in the iframe page (the page being loaded, src) because the content is being grabbed from the school board's server...
MajorFracas
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2003

 posted posted 08-18-2003 22:27

I wrestled with the same problem for several days. With some javascript, I was able to resize the iframe to match the content (and get rid of the scrollbar) when the page loaded. But there are some limitations:

1. This only works when the page initially loads. If you click a link to another page within the iframe, the iframe will not resize. This is because the page hosting the iframe doesn't receive any events that occur in the iframe. (Unless you specifically add javascript to the pages appearing in the iframe. Since this violates your restriction on modifying the 'hosted' pages [as it did for me] , you are stuck with this limitation.)

2. If the pages appearing in the iframe are not from the same domain as the 'hosting' page, then this approach will not work and you are probably at a dead end. (This is due to security restrictions in browsers which prevent cross-site scripting.) Ultimately, this is probably your biggest obstacle...

Hope this helps.
ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

 posted posted 08-18-2003 22:50

Maybe show KARN the actual script while you're at it? ...

MajorFracas
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2003

 posted posted 08-19-2003 16:43

Of course...

code:
function resizeIframe(id) {

  try {

     frame = document.getElementById(id);



     // Get the document within the frame. This is where you will fail with 'permission denied'

     // if the document within the frame is not from the same domain as this document.

     // Note: IE uses 'contentWindow', Opera uses 'contentDocument', Netscape uses either.

     innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;



     // Resize the style object, if it exists. Otherwise, resize the frame itself.

     objToResize = (frame.style) ? frame.style : frame;



     // Resize the object to the scroll height of the inner document body. You may still have 

     // to add a 'fudge' factor to get rid of the scroll bar entirely. With a plain-vanilla 

     // iframe, I found Netscape needs no fudge, IE needs 4 and Opera needs 5... 

     // Of course, your mileage may vary.

     objToResize.height = innerDoc.body.scrollHeight + 5;

  }

  catch (e) {

     window.status = e.message;

  }

}



To have the iframe properly sized once the page loads, add

code:
onload="resizeIframe('theIframeId');"

to the body tag for the page which contains the iframe. Also, change 'theIframeId' to the id of the iframe you wish to resize.

I've tested this in Opera 7, IE 6 and Netscape 7.

(Thanks, ozphactor! In reviewing the above code before posting, I found it to be broken. And, in fixing it, I have found it now works in Opera -- in earlier attempts I had never gotten it to work in Opera...)


[This message has been edited by MajorFracas (edited 08-19-2003).]

[This message has been edited by MajorFracas (edited 08-19-2003).]
MajorFracas
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2003

 posted posted 08-20-2003 22:39

Since I've been thinking about this problem, I may as well finish it and give a complete solution.

Provided that the files you 'host' in the iframe are in the same domain as the page 'hosting' the iframe, you could add the following code to the <body> tag of the hosted pages for a complete solution.

code:
onload="if (window.parent && window.parent.resizeIframe) {window.parent.resizeIframe('myFrame');}"



Of course, you'll want to replace 'myFrame' with the name of the iframe on the hosting page.

That should do it. The iframe will resize every time the inner document changes, eliminating the vertical scroll bar forever! [insert evil laugh here...]

Ok. Now I suppose this thread needs to be moved to the JavaScript forum....

mlibby
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Nov 2004

 posted posted 11-06-2004 19:44

Hi MajorFracas,

I've been using the following to fire the onload event from the IFrame's hosting page...


<IFrame id="MyFrame" OnLoad="ReSize(this);"></IFrame>

Its clean and works 100% of the time in I.E. but not in Netscape or Mozilla. The IFrame's OnLoad event never gets fired. Any ideas why?

Mike
shanterusan
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Mar 2005

 posted posted 03-27-2005 08:36

I know there would be a very obvious solution to this, but I just can't see it... *blushes*

The resizing frames work perfectly for me (I tested it in Firefox and IE). However, links to change the content open a page with the iframe in a new window. My links look like this: <a href="page1.htm" target="theIframeId">. I tried it both with and without the onLoad event handlers in the body tags of the "hosted" pages.

Help, please ^_^
reisio
Bipolar (III) Inmate

From: Florida
Insane since: Mar 2005

 posted posted 03-27-2005 23:38

Maybe I missed something, but couldn't you just use a <div>?


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu