JavaScript - Resize Iframe According To Loaded Content
In my page, I have a main iframe where I want all the content of my links to be loaded. I want the iframe's height to resize according to the content. All the linked pages are in the same domain. I have tried some scripts I found, but nothing has the result I want.
The HTML code is: Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>index</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"></div> <div id="nav"> <a href="home.html" target="frame">Home</a> <a href="the_band.html" target="frame">The Band</a> <a href="News.html" target="frame">News</a> <a href="gallery.html" target="frame">Gallery</a> <a href="contact.html" target="frame">Contact</a> </div> <iframe id="frame"></iframe> <div id="footer"></div> </div> </body> </html> The CSS code is: Code: div#container { height: 100%; width: 100%; } div#header { top: 0px; width: 100%; height: 80px; position: fixed; background-color: transparent; text-align: center; } div#nav { font-family: MgSouvenirLight; font-size: 18pt; color: #FF0; top: 120px; width: 100%; height: 40px; position: fixed; text-decoration: none; font-weight: bolder; font-variant: normal; } div#footer { font-family: Arial, Helvetica, sans-serif; font-size: 9px; bottom: 0px; position: fixed; height: 30px; width: 100%; text-align: center; color: #fff; } #frame { position: absolute; top: 200px; bottom: 40px; width: 800px; border: none; left: 120px; height: auto; } a:link { font-family: MgSouvenirLight; font-size: 18pt; color: #FF0; } a:visited { font-family: MgSouvenirLight; font-size: 18pt; color: #FF0; } a:hover { font-family: MgSouvenirLight; font-size: 18pt; font-style: italic; color: #FC0; } I don't know how to make scripts on my own, so I would appreciate any help. Thank you! Similar TutorialsThe project I am working on involves a flash piece that communicates with a iframe. Currently the flash piece just calls on javascript functions. I want the buttons in the flash piece to be able to change the src of the iframe. PHP Code: <script type="text/javascript"> document.getElementById('video').setAttribute('src',address2); function closeVideo() { document.getElementById('video').style.height='0px'; return false; document.getElementById('video').setAttribute('src', address2); } function openVideo() { document.getElementById('video').style.height='391px'; return false; document.getElementById('video').setAttribute('src', address); } </script> So the way the code works now is when the page loads it sets the iframe with the id of 'video' to the variable address2 which it pulls from an XML file. In the flash piece when a button is hit, it calls openVideo() which "opens" the iframe and I want it to change the contents to address. This does not work though. It opens the frame but will not change the src. I've tried a bunch of different things now such as make the flash target the iframe using navigateToURL(request1, 'video'); but in Firefox and IE is opens it stills as if I had _blank in there. It does strangely work in Safari. Any ideas how to get this to work? I'm new to javascript so it could be something basic I'm overlooking Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. Hi all, I am facing problem in preventing my web page being loaded into an iFrame. I search in internet and found this solution : if (self == top) document.documentElement.style.display = 'block'; else top.location = self.location; The above java script code is simple redirecting me to the home page of my web site. But I donot want that kind of solution. When anybody tried to access my web page through iFrame, it should show an error message like "The content of the web site cannot be loaded into an IFrame". This message should be displayed inside the iFrame. For example, if we tried to access "google.com" site in an iframe, the website should not allow the iframe object to load into it, insted it will display an error message along with a provision to open webiste with an external link with it. Any help? thanks, -Sanath Im very new to java scripting so any help would be truly appreciated. I have a single web page that loads several iframes. One of the iframe pages has to be logged in first. I have that taken care of but once the page is loaded I need to change the source to a link with in the page. My guess is I need something to execute the code like a onload or something. This is what Ive been trying to get to work but like I said a newb! The iframe in question is named "cad" the initial source once loaded is 'https://urlname.com/mainmenu.asp' the source I need to change to is 'https://urlname.com/UnitStatusF.asp?agency_id=28' [CODE] function ChangesSrc() { var iframeid = document.getElementById(cad); var unitstatus = 'https://urlname.com/UnitStatusF.asp?agency_id=28' if (iframeid.src = 'https://urlname.com/mainmenu.asp') iframeid.src = unitstaus; return false; } [[CODE] Hi As title says : "How to hide div so his content won't be loaded until he is visible?" And is it possible to add preloader for that div? Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. Hello, I have build a tree view forum, I have used the iframe tag to import it to my wordpress blog . I have a script that determine the size of the iframe on load: Code: <script language="JavaScript"> <!-- function calcHeight() { //find the height of the internal page var the_height= document.getElementById('the_iframe').contentWindow. document.body.scrollHeight; //change the height of the iframe document.getElementById('the_iframe').height= the_height; } //--> </script> The problem with the script is that the forum(tree view forum) only shows topics. I have another script that displays the contents of any issue only while clicking (Void). In actual the contents of each issue is charging ahead - but the resize function of the Iframe script not see it. How do I fix it, that the size of the Iframe will change automatically? Thanks alot Hi all let me start off by saying: "AAAAAAHHHHHHHAAAAAAA" Feel better now! I have an iFrame which loads individual pages from my site, I am using javaScript to tell the iFrame to resize to the size of the page that is being loaded, the problem is when I click on the link the iFrame does not resize but if I click on the link again it does resize! The fuction is called but only the second time round. Also the none of the script works in FireFox! HELP PLZ! My Code: Code: <SCRIPT LANGUAGE=javascript> <!-- function reSize() { try{ var oBody = ifrm.document.body; var oFrame = document.all("ifrm"); oFrame.style.height = oBody.scrollHeight + (oBody.offsetHeight - oBody.clientHeight); } //An error is raised if the IFrame domain != its container's domain catch(e) { window.status = 'Error: ' + e.number + '; ' + e.description; } } //--> </SCRIPT> <body onload="reSize()" onresize="reSize()"> <li> <a href="home.html" rel="nofollow" target="info" onclick="reSize();"> <img src="css/images/home.gif" width="40" height="40" alt="" class="nav_menu_image" /> <span class="nav_title">Home</span> <br/> </a> </li> <iframe onresize=reSize() id=ifrm src="home.html" name="info" frameborder="0" padding="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="500px" allowTransparency="true" noresize> </iframe> Hi there, I am looking to retrieve the hieght of the browser window, so that when my index page loads, it will automatically resize an iframe that i have to fill the remaining hieght of the window. The image above shows the location of the iframe, and the problem that i am facing. Currently, the height of the iframe is hardcoded. On my laptop screen the iframe looks as if it fills the remaining 100% of the height. However, when viewing this page on my 17in monitor, there is now an ugly white space. I would like to be able to dynamically change the height of the iframe, so that it can fill up that white space with more iframe height. (1) shows the current hard-coded height of the iframe, and (2) shows the height that i would like to be able to retrieve using javascript. If i can get this value, then i assume all i then need to do is to substract the number of pixels that are taken up by the image, and the two nav bars at the top. Hopefully this would then give me the iframe filling up all available white space. The code i have currently to set the iframe height is: Code: <script type="text/javascript"> function setIframeHeight(iframeName) { var iframeWin = window.frames[iframeName]; var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null; if ( iframeEl && iframeWin ) { iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous //var docHt = getDocHeight(iframeWin.document); // need to add to height to be sure it will all show iframeEl.style.height = 100 + "%"; alert(document.height); } } </script> </head> <body onload="setIframeHeight('ifrm');"> So, I am now able to change the height of the iframe when the page loads, i just now need to hopefully be able to get the value from (2) in the image, to make it all work out nicely. Is this possible? Any help or advice will be greatly appreciated! Thanks in advance I have an iframe on my page which begins at 300x250. Onclick from an outside control (button), I have it resizing to 720x405. What I need it to do on that same click is change position on the page as well as resize (top, left.) Any way I can do this? Here's my resize script and the accoutrements with it... <!---Begin head section here---> <head> <!---Begin Style Section Here---> <style> .fauxButton { background: buttonface; font: menu; border: 1px outset white; cursor: default; padding-left: 6; padding-right: 6; padding-top: 2; padding-bottom: 1; border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-right: 1px solid buttonshadow; border-bottom: 1px solid buttonshadow; height: 20px; } </style> <!---End Style Section Here---> <script language="JavaScript"> function resizeIframe(iframeId, iframeHeight, iframeWidth) { if (iframeWidth>0) { document.getElementById(iframeId).style.width=iframeWidth; } if (iframeHeight>0) { document.getElementById(iframeId).style.height=iframeHeight; } } </script> </head> <!---End head section here---> <body> <iframe name=video_iframe id=video_iframe frameborder="0" src="player.asp" scrolling=no allowtransparency="true" style="position:absolute; width:300px; height:250px; top:361px; left:720px;align:top; align:left; border:0px solid #FF0000; background-color:#FFFFFF; padding:0px 0 0; z-index:3;"> </iframe> <a id="widenButton" class=fauxButton onclick="resizeIframe('video_iframe', 420, 720);document.getElementById('widenButton').style.display='none';document.getElementById('narrowButt on').style.display='inline';" style="display:inline;">Wide -></a> <a id="narrowButton" class=fauxButton onclick="resizeIframe('video_iframe', 250, 300);document.getElementById('narrowButton').style.display='none';document.getElementById('widenButt on').style.display='inline';" style="display:none;"><- Narrow</a> </body> Thanks in advance, Miz Parker Hi all, I have an iframe on my page and I added the following code to detect the iframe file height to avoid scrolling which is working fine. Code: <script type="text/javascript"> function setIframeHeight(iframeName) { //var iframeWin = window.frames[iframeName]; var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null; if (iframeEl) { iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous //var docHt = getDocHeight(iframeWin.document); // need to add to height to be sure it will all show var h = alertSize(); var new_h = (h-148); iframeEl.style.height = new_h + "px"; //alertSize(); } } function alertSize() { var myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myHeight = document.body.clientHeight; } //window.alert( 'Height = ' + myHeight ); return myHeight; } </script> <body onload="setIframeHeight('ifrm');"> <iframe name="ifrm" id="ifrm" src="http://thirdpartywebsite.com/search.htm" width="948" frameborder="no" scrolling="no" style="margin-top:45px; margin-left:10px; align="center"> </iframe> There is a form in the iframe and it is coming from a third party web site which I have no access. My problem is when a client submits the search form in the iframe search results page is higher than the search main page and half of search results page is not shown. Is there a way to sense that the page in the iframe is changed and resize the iframe height accordingly? Thanks Ceyhun I am having difficulties with Internet Explorer and cannot find a solution online. The code in question is at http://www.blainegregson.com/news.php. The iFrame resizes for Firefox, Chrome, and Safari but not for IE. Also, I don't know javascript and thus found this code online. Here is the sample code: Code: <Script type="text/javascript"> function setIframeHeight(iframeName) { var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null; if (iframeEl) { iframeEl.style.height = "auto"; // need to add to height to be sure it will all show var h = alertSize(iframeName); iframeEl.style.height =h + "px"; } } function alertSize(frameId) { var myHeight = 0; frame = document.getElementById(frameId); if( typeof( window.innerWidth ) == 'number' ) { //Non-IE var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]; var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0; myHeight=frame.contentDocument.body.offsetHeight+FFextraHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document; myHeight= innerDoc.body.scrollHeight + 10; //myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myHeight = document.body.clientHeight; } //window.alert( 'Height = ' + myHeight ); return myHeight; } </script> I am building iframes from database entries. Is it possible to resize them with an onclick event?
Hi, I would like to know how I can use JavaScript to find the size of my iFrame and feed it to Shadowbox to launch the appropriate sized shadowbox on different browsers and resolutions. For me, the parent page is called 'demo.html' and the iFrame is 'gallery/archive_iframe.html'. Currently, the shadowbox is launched with a fixed height and width (which you will see in the HTML code below). The problem is that 'gallery/archive_iframe.html' displays differently on every browser and every resolution, causing unwanted horizontal and vertical scroll bars. An example can be seen he http://www.mikegermond.com/demo.html Here is the code that I use in 'demo.html' to launch the iFrame: Head Code: <script type="text/javascript" src="/shadowbox/libraries/mediaplayer/jquery.js"></script> <script type="text/javascript" src="/shadowbox/shadowbox.js"></script> <script type="text/javascript" src='/shadowbox/libraries/mediaplayer/swfobject.js'></script> <script type="text/javascript"> function moveCloseLink(){ var cb=document.getElementById('sb-nav-close'); var tb=document.getElementById('sb-title'); if(tb) tb.appendChild(cb); } Shadowbox.init({ onOpen: moveCloseLink, flvPlayer: '/shadowbox/player.swf', language: 'en', players: ["flv","iframe"], flashParams: {allowfullscreen:'true'}, flashVars: { skin: '/shadowbox/modieus.swf', image: '/upload/demo-poster.jpg', autostart: true } }); </script> Body Code: <A HREF="/gallery/archive_iframe.html" rel="shadowbox;width=750;height=486" class="imgLink" title="Video Archive"><img src="gallery/videoarchive_thm.jpg" alt="Launch Video Archive (popup window)" width="260" height="162" border="0" /></A> What do I need to do in 'gallery/archive_iframe.html' if anything? My thought is that I need to wrap it in a DIV tag and find the width and height of that. And what do I need to do in 'demo.html'? I'd assume some code is needed to pull the dimensions discovered in my iframe document, and insert those into the link that launches Shadowbox. Consider me a JavaScript newbie! You're help is greatly appreciated!! Hi! I have a mysql database with a bunch of quotations in it. I created a blog at http://aro2220.blogspot.com At the top of the blog is an iframe window that directs to http://aro2220.com/blog On that page it uses php to pull out a random quote from the database. The iframe window displays that quote onto the blog. It works great except that the height is not automatically resizing. Is there a way I can use javascript to do this instead? Here is some pseudo-code of what I'd like to be able to do: (p.s. I do not know javascript or much of anything so I am looking for people to tell me how to ACTUALLY do this) Quote: var stringvariable = http://aro2220.com/blog/index.html; int stringlength = stringlength(stringvariable); int autosize = 200 + stringlength * 5; <iframe width="100%" frameborder="0" src="http://aro2220.com/blog" height=$autosize scrolling="no"></iframe> Obviously these are not real functions or proper syntax but hopefully it will paint a clear picture on what I am trying to do. http://isensors.com.sg/isensors-GJ/ That's the page I'm working on now, the script I'm using from he http://www.frontpagewebmaster.com/m-89000/tm.htm posted by collide007. It allows me to resize my iframe when a new page loads in it, it's working fine on Chrome and Firefox. For safari, the iframe expands but does not contract when a smaller page is loaded in. The code doesn't even work in IE. <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=["contentframe", "newsframe"] //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++){ var iframeid = iframeids[i]; 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" } } } 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+50; else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax currentfr.height = currentfr.Document.body.scrollHeight+50; 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> Could someone kindly help me find the problem? Thanks. What wrong in this code? Code: <script type="text/javascript" src="jquery.js"></script> <script> $(function (){ function manda(){ var text = $('#frame').contents().find('p[class=no_boder]').html(); $('div').html(text); } }); </script> i've already tried using this -> $('#frame').contents().html(); How can i get the content? Good Day Everyone, I need some help resizing an iframe to fit it's content. Basically, I have 10 spreadsheet pages saved as htm files. I am creating a page that enables me to view each of these htm files. I need the iframe to be resized for each htm file. This is my code: Code: <html> <head> <script language="javascript"> <!-- var state = 'none'; function showhide(layer_ref) { if (state == 'block') { state = 'none'; } else { state = 'block'; } if (document.all) { //IS IE 4 or 5 (or 6 beta) eval( "document.all." + layer_ref + ".style.display = state"); } if (document.layers) { //IS NETSCAPE 4 or below document.layers[layer_ref].display = state; } if (document.getElementById &&!document.all) { hza = document.getElementById(layer_ref); hza.style.display = state; } } function autoResize(id) { var winW = 0, winH = 0 ; if (document.body && document.body.offsetWidth) { winW = document.body.offsetWidth - 235; winH = document.getElementById('page').contentWindow.document.body.scrollHeight; } document.getElementById(id).height=(winH) + "px"; document.getElementById(id).width=(winW) + "px"; } //--> </script> <style type="text/css"> .yssOver{background-color:#ffffff;} .yssOut{ background-color:#E6EFFF;} #content { position:absolute; left:210px; top:40px; } html { overflow:off; } img { display:block; vertical-align:text-top;} h1{ color: #000000; font-family:"Arial",Times,sans-serif; font-weight:bold; font-size:12px; margin-bottom:0px; } #document{ position:absolute; top:0px; left:0px; } #menu{ margin: 0 0 0 0; padding-left:0px; border: 0 -10 0 0; } img.arrow { margin: 4 0 0 0; } table.menu td { border: 1px solid; border-color:#7D91D0; } table.div td { border: 0px solid; border-color:#7D91D0; } a:link {color: #000000; font-family:"Arial",Times,sans-serif; font-size:12px; text-decoration: none;} a:active {color: #000000; font-family:"Arial",Times,sans-serif; font-weight:bold; font-size:12px;} a:visited {color: #000000; font-family:"Arial",Times,sans-serif; text-decoration: none; font-size:12px;} a:hover {color: #000000; font-family:"Arial",Times,sans-serif; font-size:12px;} </style> </head> <body onLoad = "window.frames['page'].location = 'home.png'" > <table id=document border=0 cellpadding=0 cellspacing=0> <tr><td> <img src=halifax_logo.png></img> </td><td width=100%> <img src=headerback.png width=100% height=80></img> </td></tr> <tr><td> <table width=95% class=menu border=1 id=menu border=0 cellpadding=0 cellspacing=5 background=menuback.png> <tr><td> </td></tr> <tr><td class=menutd background=tdback.png> <a href="cofunds designations.htm" target="page"> Cofunds Designations</a> </td></tr> <tr><td class=menutd background=tdback.png> <a href="Commission Codes Most Used.htm" target="page" " height=516 width=974 onmousedown="if(document.getElementById('div2').style.display == 'none'){ document.getElementById('div2').style.display = 'block'; }else{ document.getElementById('div2').style.display = 'none'; }"> Commission Codes</a> <div id="div2" style="display: none;"> <table class=div border=0 cellpadding=0 cellspacing=0 style=background-color:#E6EFFF; border: 1px solid; border-color:#7D91D0; width=100%> <tr><td> <img class=arrow src=side_grey_arrow.png></img> </td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';"> <a href="Commission Codes Most Used.htm" target="page">Most Used</a> </td></tr> <tr><td valign=top> <img class=arrow src=side_grey_arrow.png></img> </td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';"> <a href="Commission Codes.htm" target="page">All</a> </td></tr> </table> </div> </td></tr> <tr><td class=menutd background=tdback.png> <a href="corporate accounts1.htm" target="page"> Corporate Accounts</a> <div id="div3" style="display: none;"> <table class=div border=0 cellpadding=0 cellspacing=0 style=background-color:#E6EFFF; border: 1px solid; border-color:#7D91D0; width=100%> <tr><td> <img class=arrow src=side_grey_arrow.png></img> </td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';"> <a href="research.png" target="page">Research Centre</a> </td></tr> <tr><td valign=top> <img class=arrow src=side_grey_arrow.png></img> </td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';"> <a href="reports.png" target="page">Company Reports</a> </td></tr> </table> </div> <tr><td class=menutd background=tdback.png> <a href="dealers.htm" target="page"> Dealers</a> </td></tr> <tr><td class=menutd background=tdback.png> <a href="halifax funds.htm" target="page"> Halifax Fund Managers</a> </td></tr> <tr><td class=menutd background=tdback.png> <a href="other fund managers.htm" target="page"> Other Fund Managers</a> </td></tr> <tr><td class=menutd background=tdback.png> <a href="international codes.htm" target="page"> International Codes</a> </td></tr> <tr><td class=menutd background=tdback.png> <a href="market makers1.htm" target="page"> Market Makers</a> </td></tr> <tr><td height=750> </table> </td><td> <div id=content> <IFRAME name=page src="cofunds designations halifax.htm" onLoad="autoResize('page');" frameborder=0 overflow=no marginwidth=0 marginheight=0></iframe> </div> </td></tr> </table> </body> </html> This seems to work but it has a few issues, It does not resize properly for every link, only some of them. Can somebody please have a look & tell me where I am going wrong, or provide me with some better code, mine is a bit shoddy! Thanks Harry |