Forum Moderators: open

Message Too Old, No Replies

IFRAME AutoResize

IFRAME AutoResize

         

Mike_Phpbb

4:14 pm on Apr 10, 2005 (gmt 0)

10+ Year Member



Hi Folks,

There was a great suggestion here on this site on how to automatically resize and IFRAME based on content:

[webmasterworld.com...]

The thread is closed to new posts, hence this new one pointing to it.

This process does indeed resize the IFRAME to it's proper size, which is exactly what I need. However, the page loaded in the IFRAME no longer has the correct root directory when doing this. For example, if you have:

./toppage.php

which calls an IFRAME with a src="./nested/childpage.php"

When you open "toppage.php" it correctly loads "./nested/childpage.php" which renders correctly, including all of it's relative links to content within and below the "nested" directory.

When you add the "insertit()" JS discussed in the post above, it changes the root directory of "childpage.php" to that of "toppage.php", so none of the relative links in "childpage.php" render correctly since it thinks it's root directory is "./" instead of "./nested".

Any idea on how to correct this?

-TIA

-Mike

kaled

7:04 pm on Apr 10, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Essentially, the problem comes down to adjusting the relative urls in the html. For this, you need a carefully crafted regular expression. Unfortunately, I can't help you, but someone here should be able to. If you're in a hurry you could try searching on Google for something like javascript "regular expression" url.

Good luck,

Kaled.

Mike_Phpbb

11:49 pm on Apr 10, 2005 (gmt 0)

10+ Year Member



Hi Kaled,

Yup, the more I looked at it the more I realized it was going to be tough.

So I started looking at the solution proposed here:

[webmasterworld.com...]

and found that it was a good start, but there is a better way to do this that works consistently AND doesn't take the IFRAMEd page out of it's root directory.

All you need to do is put the IFRAME inside of a named DIV, and then for the IFRAME BODY call an ONLOAD that does the resizing on the parent, for example:


function resizeIframe(divname) {
parent.document.getElementById(divname).style.height = document.body.scrollHeight+20;
return false;
}

Worked great, tested it on MSIE, Mozilla and Opera with no problems so far. :)

-Mike

kaled

8:22 am on Apr 11, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks for posting a solution. I remember wanting to do something like this a while back but I can't quite remember which part of my site needed it. When I have some spare time, I'll give this a whirl.

Kaled.