iframe resize based on iframe src

[BoR|S]

Let's say I have a webpage with an iframe.
I don't want to see no scroll bars in the iframe, so I want to resize it (I care only about it's height) based on the file I'm viewing using that iframe...

How can that be done?
Is there a way I can put the overflow:visible style attribute and it will work for the iframe the way it works for span?
(I took the overflow reference from here (http://home.maconstate.edu/dadams/Tutorials/DHTML/dhtml02/dhtml02-02.htm))

[Mhtml]

Howdy BoR|S!

Well you can use javascript to dynamically change the height of the iframe.

<script language="javascript" type="text/javascript">
function resizeFrame(theFrame) {
switch (theFrame.src){
case 'file1.html': theFrame.height = 100;
case 'file2.html': theFrame.height = 50;
case 'file3.html': theFrame.height = 230;
}
}
</script>

I think that'll work, never used switch before though ...
Anyhow I'm shipping this thread off to the javascript forum.

[joh6nn]

this has been asked here before, but i don't remember what the answer turned out to be. try using the forum's search function, to see if you can find it.

[BoR|S]

Originally posted by Mhtml
Howdy BoR|S!

Well you can use javascript to dynamically change the height of the iframe.

<script language="javascript" type="text/javascript">
function resizeFrame(theFrame) {
switch (theFrame.src){
case 'file1.html': theFrame.height = 100;
case 'file2.html': theFrame.height = 50;
case 'file3.html': theFrame.height = 230;
}
}
</script>

I think that'll work, never used switch before though ...
Anyhow I'm shipping this thread off to the javascript forum.

Well this idea is good, but my problem is that I don't know the height of the page that will show in the iframe...
Anyway, I managed to set it working by adding to the <iframe... tag the following code:

style="overflow:visible"

However, this works only for the page that is loaded inside the iframe by default... When I follow one of the links on the iframe src page, I'm getting a scroll bar again...
Is there a way to apply the overflow attribute to each of the links loaded inside the iframe?

[BoR|S]

Originally posted by joh6nn
this has been asked here before, but i don't remember what the answer turned out to be. try using the forum's search function, to see if you can find it.


I ran the search before posting, and I tryed to use the suggested solutions given in the search results, but it didn't work for me...
That's why I started this thread...

[shlagish]

If I understand, your asking the impossible: know the height of a page you don't know about...

[allida77]

crreate a function on your parent page like so:

function resizeIframe(iheight){
var objIframe = document.getElementById("ifr")
objIframe.height=iheight
}

Now on the bottom of the page for the src of your iframe call this same function passing the desired height.

<script>
parent.resizeIframe(screen.height)
</script>

screen.height will just be the resolution so you will need to get the height of the div you are using to hold the content.

[BoR|S]

Originally posted by shlagish
If I understand, your asking the impossible: know the height of a page you don't know about...

Well, as a matter of a fact, I don't need to get the height value of the page I don't know about, I just need the iframe height to resize this way, no vertical scroll bar will appear.
And it actually works when I add to the <iframe... code the following code:

style="overflow:visible"

The only problem is that this works only for the page specified in the <iframe... tag, the page that is loaded by default.
When I follow one of the links inside, it no longer works.
I just need to add that even the page specified in the <iframe... tag is of an unknwn height to me because it is script genenrated based on a database info, as well as the pages I can load from within the iframe.

[BoR|S]

Originally posted by allida77
crreate a function on your parent page like so:

function resizeIframe(iheight){
var objIframe = document.getElementById("ifr")
objIframe.height=iheight
}

Now on the bottom of the page for the src of your iframe call this same function passing the desired height.

<script>
parent.resizeIframe(screen.height)
</script>

screen.height will just be the resolution so you will need to get the height of the div you are using to hold the content.

I thought about putting a code inside the iframe src page that will tell the iframe what height is the page, but unfortunatly, this won't work.
The page inside the iframe is generated by an external program, and unless I mess with the source code of that program (which is not a web script) I can't add code to the output pages. Another reason why I can't do it, is that the program is not an open source one, and I just have no right and no permission to mess with it's code...

[tamago]

Try this code, bearing in mind that it will not work if the document in the iframe is on a different server (because of a security conflict):<script type="text/javascript">
function resizeMe(obj){
docHeight = myIFrame.document.body.offsetHeight

obj.style.height = docHeight + 'px'
}
</script>

<iframe id="myIFrame" onload="resizeMe(this)" style="height:100px;width:500px;"></iframe>When a new page is loaded, the onload event calls the resizeMe function. This function retrieves the height of the new page, and sets the iframe to that height.

IMPORTANT: 'myIFrame.document.body.offsetHeight' is not what you want for MSIE 5.0 and 5.5. For those two, use 'myIFrame.document.body.scrollHeight' (I'll let you do the code). Furthermore, the scrollbars will not be gone, because the iframe, and the body of the document in the iframe, have borders. To counter this, either set the borders to '0px', or perhaps better, add a few pixels to the iframe's height:obj.style.height = docHeight + 10 + 'px'
If you want, you can also make the iframe document 'blend in' with the main page, by aligning the background colours/images. This requires more code, but it's pretty straightforward.

Hope this helps :o)

[BoR|S]

I tryed to do it, both of the variations, but the result I get is that the iframe remains at the height of the page which is called by default from the <iframe... tag...
The problem is that this page, usually smaller than the pages it links to...
When I put in the <iframe... tag any other page, the first page will fit in it because of being smaller, but the page will remain at the height of the page in the predefined iframe src...

[tamago]

I don't know why it won't work. It's working fine for me: when a new page has loaded into the iframe, the iframe becomes taller or shorter as necessary to fit the page.

At present I am on holiday, and only have access to MSIE 5.5. Unfortunately I won't have access to my other browsers until Sunday.

The code I am using currently is almost identical to what I gave you:<script type="text/javascript">
function resizeMe(obj){
docHeight = myIFrame.document.body.scrollHeight

obj.style.height = docHeight + 'px'
}
</script>

<iframe id="myIFrame" onload="resizeMe(this)" style="height:100px;width:500px;"></iframe>
A quick checklist: Iframe's ID matches the ID in the line beginning 'docHeight = '
IFrame's onload attribute reads "resizeMe(this)"
You are using the correct offsetHeight/scrollHeight for your browser.I realise you have probably done all this, but I can't think why else it wouldn't work (unless the page is on a different server, in which case you should get an error).

[BoR|S]

Iframe's ID matches the ID in the line beginning 'docHeight = '

Ooops... :rolleyes:

Now it works!
Thanks for help, and thanks for all other who helped!

[iceman]

This works for me

<SCRIPT language=javascript>
<!--

function frm_onload(frmname)
{
frmname.frameElement.height = frmname.document.body.scrollHeight+20;
}

//-->
</SCRIPT>
</HEAD>
<BODY>

<A HREF="shortpage.htm" TARGET=frm>Short page</A>
<BR>
<A HREF="longpage.htm" TARGET=frm>Long Page</A>
<BR>
<IFRAME ID=frm NAME=frm WIDTH=100% LANGUAGE=javascript ONLOAD="return frm_onload(frm)">
</IFRAME>

[jflowers]

Now for the next hurdle - when the target page is not in the same domain.

We have many domains and would like to use some of the fancy techniques that are available to display these pages, ideally in the main window of a content management system and with the iframe height expanded to fit the content for the initial and each followed-link page.
[list=1]
The document height of the target page is only available inside the iframe (security restriction).
The iframe height property is only writeable in the parent document.
One solution is to include a <body onLoad event call from inside the target document to a javascript iframeResize function in the parent document with the height as a parameter. I have verified that this works with static pages.
[/list=1]
For the initial page the iframe src would refer to a php page (on the same server) with the desired target page in the query string. Something like
http://clone.myserver.com/index.php?module=getpage&page=http://thetargetpage.alsomyserver.com
This script would obtain the target page and embed the javascript call before sending it on to the iframe. I have also verified that this works.

For link-follow pages, the links in the initial document would also have to be rewritten to follow the same general procedure to query my php server instead of the target host.

All pretty complex and there are lots of ways a link transfer can be generated.

What would really help is if it were possible for javascript running in the iframe to do the whole thing: obtain the source (initial or linked) document, render it to obtain the height and then initiate the resize call. And, even better would be if it were possible to design an event handler that could intercept the onLoad event and initiate the javascript callback iframeResize function without having to modify any source documents.

Any sharp guys out there that can figure out how to do this?

Thanks.

[LadynRed]

I know this is an old thread, but I just wanted to say THANK YOU anyway. :D

I had the exact same problem to solve as Boris did.. and the solution given here definitely worked for me and solved my dilemma.

Thanks :thumbsup: