Dynamic iframe height

Question

fred999 0 Newbie Poster

20 Years Ago

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

javascript

9 Contributors
8 Replies
2K Views
7 Years Discussion Span
Latest Post 12 Years Ago Latest Post by goldentuna

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ipodgirl 0 Newbie Poster · Answer 1 · 2005-03-03T05:12:21+00:00

If you are trying to do that for pages within the same domain, this script should do the trick:

http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

joshkotecha 0 Newbie Poster · Answer 2 · 2006-06-29T03:03:56+00:00

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

hilmanDev 0 Newbie Poster · Answer 3 · 2006-10-02T10:22:05+00:00

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>

vbnullchar 0 Newbie Poster · Answer 4 · 2006-11-27T16:10:54+00:00

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>

dreambouy 0 Newbie Poster · Answer 5 · 2008-02-10T06:46:48+00:00

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.

Griffin54 0 Light Poster · Answer 6 · 2008-03-22T06:27:31+00:00

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

Abhijeet anand 0 Newbie Poster · Answer 7 · 2011-11-16T11:41:54+00:00

Add

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

to your css.
It will work fine.

Abhijeet
SSGIndia

goldentuna 0 Newbie Poster · Answer 8 · 2012-10-11T15:24:44+00:00

goldentuna 0 Newbie Poster

12 Years Ago

Did any of these solutions work for you?