Hi all, how would you adjust the height of an iframe based on its src content?

I want to integrate a forum (phpbb) inside my custom made website. The problem is that there is no way to dynamically adjust the iframe height... im pulling out my hair here...

I thought javascript would be the best way to do that, the problem is that i know nothing about JS... Here is my idea,

-2 scripts, 1 in the parent page (the one with the iframe tag) and the second one in the main forum page

-The script inside the parent page, would dynamically set the "height" parameter inside the iframe tag based on a value passed by the second script.

-The second script, inside the forum page, would read the entire content of the (document.body.scrollHeight) current page and sends its result to the first script

I have found a script that was supposed to do that, but for some reasons it doesnt work very well. Here is the link where i explain de problem with it: http://www.dynamicdrive.com/forums/showthread.php?p=2891&posted=1#post2891

Now, what do the experts think? do you think its gonna work? Is this a bad idea? Please i need help bad.

Thanks in advance,

fred

Did you find a solution? I'm trying to do something very similar and have some problems with the dyniframe.js you reference.:sad:

Hi all, how would you adjust the height of an iframe based on its src content?

I want to integrate a forum (phpbb) inside my custom made website. The problem is that there is no way to dynamically adjust the iframe height... im pulling out my hair here...

I thought javascript would be the best way to do that, the problem is that i know nothing about JS... Here is my idea,

-2 scripts, 1 in the parent page (the one with the iframe tag) and the second one in the main forum page

-The script inside the parent page, would dynamically set the "height" parameter inside the iframe tag based on a value passed by the second script.

-The second script, inside the forum page, would read the entire content of the (document.body.scrollHeight) current page and sends its result to the first script

I have found a script that was supposed to do that, but for some reasons it doesnt work very well. Here is the link where i explain de problem with it: http://www.dynamicdrive.com/forums/showthread.php?p=2891&posted=1#post2891

Now, what do the experts think? do you think its gonna work? Is this a bad idea? Please i need help bad.

Thanks in advance,

fred

Did you find a solution? I'm trying to do something very similar and have some problems with the dyniframe.js you reference.:sad:

I have found the solution for your problem based on dyniframe.js :)
I hope this solution is meaningful for you :cheesy:

The solution is you have to put last statement into new own function. and every page that you want to load into the frame call parent function that you created before. For example :

in Main Page (before) :

<Script>
...
...
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
</Script>

Change into :

<Script>
...
...
function onLoadPage() {
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
}
</script>

On every frame page put script on body tag like this :

<body onLoad="parent.onLoadPage();">
...
...
</body>

What if my source is from other domain? this is my problem right now?

I have found the solution for your problem based on dyniframe.js :)
I hope this solution is meaningful for you :cheesy:

The solution is you have to put last statement into new own function. and every page that you want to load into the frame call parent function that you created before. For example :

in Main Page (before) :

<Script>
...
...
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
</Script>

Change into :

<Script>
...
...
function onLoadPage() {
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
}
</script>

On every frame page put script on body tag like this :

<body onLoad="parent.onLoadPage();">
...
...
</body>

Folks, To fix the iframe height issue, I added the following code at the end of my page.(page within the iframe)

<script type="text/javascript">
    parent.window.document.getElementById("<FRAME_NAME>").height = document.body.offsetHeight ;
    </script>

It worked perfectly. At some places, the height was not coming properly, so I added 25 or 50 to reach my requirement. Try using this in the above code..
document.body.offsetHeight + 25

Try it out and let me know if you find any issues.

Hello all;

I have been having problems with an iframe application too. However, my problem only seems to appear when I test my site on the FireFox browser. My iframe appears properly in IE and Opera. Below is the syntax I used.

In the "body" of my webpage I wrote the following:

<div id="frame">
<iframe id="secondFrame" name="secondFrame" width="50%" height="500em" frameborder="1" scrolling="auto" src="iframeimagesrc.htm">  
</iframe>
</div>

In my "CSS" file I wrote the following:

div#frame { text-align: center;
         padding: 10px; }

Any ideas why my iframe works in IE and Opera but not in FireFox??

Thanks, Griffin54

Add

#secondFrame{ 
text-align: center;
padding: 10px; 
}

to your css.
It will work fine.

Abhijeet
SSGIndia

Edited 5 Years Ago by Ezzaral: Added code tags and snipped email. Keep it on site.

This article has been dead for over six months. Start a new discussion instead.