iframes - auto resize to heigh of content?

iframes - auto resize to heigh of content? (Full Version)

All Forums >> [Web Development] >> General Web Development

Message

zaphod -> iframes - auto resize to heigh of content? (9/10/2002 6:54:25)
Hi, I have built a page which has an iframe in it. I also have a page header and footer displayed on the page, shown by way of include file statements. The iframe is between the header and footer and is set to display a page not on my website. The inserted page has hyperlinks on the page which the user can click, and thus the height of the content to be displayed changes. Is it possible to set up the iframe so that it will auto size the frame window page to the size of the inserted page to be displayed, if it changes. I have currently had to set the height of the iframe very large so that it will display the biggest page of content that the user can display using the frame (800). The only problem with this is that most pages to be shown in the frame are only small, so for the most part users dont get to see the page footer. One last point, I dont want to use a scroll bar to achieve the above. Is it possible to do this, and if so how? love Zaphod

bobby -> RE: iframes - auto resize to heigh of content? (9/10/2002 11:39:19)
Unfortunately no... And if you could specify that the i-frame be 100% of the content, it would set it' s height the first time your page loads... so when new links are clicked it would remain the original height (since the page would not refresh when a link is clicked)

zaphod -> RE: RE: iframes - auto resize to heigh of content? (9/11/2002 9:05:07)
Thanks for responding. What a bummer! zaphod http://3GNo1.com

bobby -> RE: iframes - auto resize to heigh of content? (9/11/2002 9:45:46)
I feel your pain... I hate it when I have a great idea for using some feature or method on a web page and it doesn' t work the way I think it should.

marsyas -> RE: iframes - auto resize to heigh of content? (9/22/2004 6:23:37)
Use this javascript function in your frame page.. " function resizeIframe(iframeID) { if(self==parent) return false; /* Checks that page is in iframe. / else if(document.getElementById&&document.all) / Sniffs for IE5+./ var FramePageHeight = framePage.scrollHeight + 10; / framePage is the ID of the framed page's BODY tag. The added 10 pixels prevent an unnecessary scrollbar. / parent.document.getElementById(iframeID).style.height=FramePageHeight; / "iframeID" is the ID of the inline frame in the parent page. */ } " and run it on load "<body id="framePage" onload="resizeIframe('idTopFrame')">"

stevec -> RE: iframes - auto resize to heigh of content? (4/14/2005 1:37:25)
I have this same issue, ideintical as described in this post. I tried this code above but I don't really know what I am doing. I put it above the php includes and the browser spits it out in the display. Here is what my page looks like quote: function resizeIframe(iframeID) { if(self==parent) return false; /* Checks that page is in iframe. / else if(document.getElementById&&document.all) / Sniffs for IE5+./ var FramePageHeight = framePage.scrollHeight + 10; / framePage is the ID of the framed page's BODY tag. The added 10 pixels prevent an unnecessary scrollbar. / parent.document.getElementById(iframeID).style.height=FramePageHeight; / "iframeID" is the ID of the inline frame in the parent page. */ } <body id="framePage" onload="resizeIframe('idTopFrame')"> <?php include( 'head.php' ); ?> <div id="idx"> <iframe src="http://idx.actris.marketlinx.com/custom/Templates/search_1.asp?pid=1407" height="100%" width="770px" scrolling="auto"></iframe> </div> <?php include( 'foot.php' ); ?> Where is my mistake? Do I just need to add tags to the top as if it were an html page? I thought FrontPage use to have a proprietary feature that allowed the inclusion of external pages. I forget what it was called. I never used it but think I remember seeing it. I haven't used FP in a couple of years, am I remembering wrong? Thanks Steve

Nigel -> RE: iframes - auto resize to heigh of content? (4/18/2005 15:37:38)
This works fine for me: <iframe src="http://www.yourwebsite.com/page.asp" width="100%" height="100%" name="youriframe" frameborder="1" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="yes" noresize></iframe> Change the scrolling to no if you dont want it you can see it in action here: www.newhallcars.com click on findacar I'm placing the contents of an asp page in the iframe and the asp page is calling the data from a database based on the search criteria. Nigel

stevec -> RE: iframes - auto resize to heigh of content? (4/19/2005 19:53:37)
I figured out that some of the code required to let an IFrame stretch to content length must go into the code of the framed page. In this case, I don't have access to that content to be able to do that. I ended up just using a regular frame with no footer. This was the easiest approach though not ideal. Thanks Steve

collide007 -> RE: iframes - auto resize to heigh of content? (2/19/2007 20:11:38)

Hi, i have a similar problem, only I have descovered a really good script for resizing my iframes and works excellently. however my problem is that, I have a iframe on the page contained within the main iframe using the same script, which too works, however, when the height of the second iframe changes, it doesnt resize the main iframe so cutting off the end of the 2nd iframe, any suggestions? Thanks. Here is the code I am using:

<script type="text/javascript">

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["maincntnt"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="no"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 3 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>

aaronfjerstad -> RE: iframes - auto resize to heigh of content? (5/30/2008 17:56:33)
I have been faced with this problem before. Here is one method you might try, depending on the content of the page. You could load the content inside a hidden IFRAME, put its innerHTML into a string variable and set the value of that variable as the innerHTML of a DIV. DIV's, unlike IFRAME's, readily adapt to their content, so it should, in theory, work for most content that you would want to show in an IFRAME without the bothersome scroll bars.

aaronfjerstad -> RE: iframes - auto resize to heigh of content? (5/30/2008 19:05:53)
Here is an example of what I mean: <html> <body> <script> function changeContent() { document.getElementById('contentDIV').innerHTML = window.frames['contentFRAME'].document.getElementsByTagName('html')[0].innerHTML; } </script> <div id = "contentDIV"><br></div> <iframe id = "contentFRAME" name = "contentFRAME" src ="somethingInMyDomain.html" onLoad = "changeContent()" style = "height:0; width:0; border-width:0;"></iframe> </body> </html> This method does not apply to anything with its own header and body tags. somethingInMyDomain.html might look something like this: <html> <table> <th>The content of my page.</th> <tr> <td>Cell 1</td><td>Cell 2</td> </tr> </table> <script> alert("Hello"); </script> </html> Scripts will work, but they must be contained like so. Browsers do not know how to handle extra body and head tags. Also, this method will not work for pages outside its domain, as this creates a security threat.

brendanx -> RE: iframes - auto resize to heigh of content? (11/16/2008 14:12:43)
Thanks, collide007. That is useful code indeed. It correctly handles getting hold of the asynchronously loaded document object inside the IFrame, which also allowed me to retarget all the links inside it to _top with only a few more lines of code. In the process, I think I noticed why you are having issues with multiple frames, though I only have one. The loop: function resizeCaller() { var dyniframe=new Array() for (i=0; i<iframeids.length; i++){ if (document.getElementById) resizeIframe(iframeids) //reveal iframe for lower end browsers? (see var above): if ((document.all \|\| document.getElementById) && iframehide=="no"){ var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids) tempobj.style.display="block" } } } Never actually indexes iframeids with i. I guess that means you are always using the first ID. I fixed the code to read: for (i=0; i<iframeids.length; i++){ var iframeid = iframeids; if (document.getElementById) resizeIframe(iframeid) //reveal iframe for lower end browsers? (see var above): if ((document.all \|\| document.getElementById) && iframehide=="no"){ var tempobj=document.all? document.all[iframeid] : document.getElementById(iframeid) tempobj.style.display="block" } } It still works fine for my single frame case, and I suspect it will work better for the multiple frame case.

compdave7681 -> RE: iframes - auto resize to heigh of content? (11/20/2008 4:09:18)
How then would you add width to this? I am trying to embed a photo gallery and have found other options but the just keep adding px to the frame and end up with scroll bars.

Page: [1]

0.09375