Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 173574

Nov 29th, 2004

Dynamic iframe height

Expand Post »

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/s...ted=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

Similar Threads

Dynamic iFrame height, not working in ie without refresh. in JavaScript / DHTML / AJAX
iframe height in HTML and CSS
Dynamic iframe height ? in HTML and CSS

fred999

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

11 posts
since Feb 2004

Permalink

Mar 2nd, 2005

Re: Dynamic iframe height

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

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

ipodgirl

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

7 posts
since Mar 2005

Permalink

Jun 28th, 2006

Re: Dynamic iframe height

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

Quote originally posted by fred999 ...

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/s...ted=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

joshkotecha

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Jun 2006

Permalink

Oct 2nd, 2006

Re: Dynamic iframe height

Click to Expand / Collapse Quote originally posted by joshkotecha ...

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

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) :

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

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

On every frame page put script on body tag like this :
[html]<body onLoad="parent.onLoadPage();">
...
...
</body>[/html]

Last edited by tgreer; Oct 2nd, 2006 at 10:26 am. Reason: User ignored directions for code tags.

hilmanDev

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Oct 2006

Permalink

Nov 27th, 2006

Re: Dynamic iframe height

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

Click to Expand / Collapse Quote originally posted by hilmanDev ...

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) :

[html]<Script>
...
...
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
</Script>[/html]
Change into :
[html]<Script>
...
...
function onLoadPage() {
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
}
</script>[/html]
On every frame page put script on body tag like this :
[html]<body onLoad="parent.onLoadPage();">
...
...
</body>[/html]

vbnullchar

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Nov 2006

Permalink

Feb 9th, 2008

Re: Dynamic iframe height

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

html Syntax (Toggle Plain Text)
    <script type="text/javascript">
    parent.window.document.getElementById("<FRAME_NAME>").height = document.body.offsetHeight ;
    </script>
    <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.

Last edited by peter_budo; Mar 22nd, 2008 at 4:12 pm. Reason: Keep It Organized - please use [code] tags

dreambouy

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Feb 2008

Permalink

Mar 21st, 2008

Re: Dynamic iframe height

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:

html Syntax (Toggle Plain Text)
<div id="frame">
<iframe id="secondFrame" name="secondFrame" width="50%" height="500em" frameborder="1" scrolling="auto" src="iframeimagesrc.htm">  
</iframe>
</div>
<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:

html Syntax (Toggle Plain Text)

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

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

Thanks, Griffin54

Last edited by peter_budo; Mar 22nd, 2008 at 4:13 pm. Reason: Keep It Organized - please use [code] tags

Griffin54

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

36 posts
since Mar 2008

Permalink

Nov 16th, 2011

Re: Dynamic iframe height

Add

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

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

to your css.
It will work fine.

Abhijeet
SSGIndia

Last edited by Ezzaral; Nov 16th, 2011 at 2:15 pm. Reason: Added code tags and snipped email. Keep it on site.

Abhijeet anand

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Nov 2011

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Dynamic webpage to image

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: How to make a 2 parts dropdown

DaniWeb Message

Cancel Changes

User Name
Password