Deks Posted December 2, 2011 Share Posted December 2, 2011 Hello, am using iframe to show dynamic data gained from sql query. So i get to little problem. Height of content is not always same. Is there any way where iframe can change height based on iframe content? some code would be perfect. Thanks. Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/ Share on other sites More sharing options...
sunfighter Posted December 2, 2011 Share Posted December 2, 2011 Why are you using an iframe and not a div???? Answer to height: http://www.w3schools.com/tags/att_iframe_height.asp Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/#findComment-1293618 Share on other sites More sharing options...
requinix Posted December 2, 2011 Share Posted December 2, 2011 am using iframe to show dynamic data gained from sql query. So i get to little problem. Height of content is not always same. Is there any way where iframe can change height based on iframe content? Yes, but it's difficult. As sunfighter pointed out, a DIV and some AJAX would very likely be better. Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/#findComment-1293641 Share on other sites More sharing options...
Deks Posted December 5, 2011 Author Share Posted December 5, 2011 Hello, am using iframe and not div because i need to call stored procedure inside procedure (sql query inside sql query) and i think my database don't like it. So i used first procedure and sent results to another script which i call with iframe. Thanks Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/#findComment-1294497 Share on other sites More sharing options...
requinix Posted December 7, 2011 Share Posted December 7, 2011 Whether you use an IFRAME or not has absolutely nothing to do with your database and stored procedures. Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/#findComment-1295411 Share on other sites More sharing options...
Frank P Posted December 7, 2011 Share Posted December 7, 2011 Is there any way where iframe can change height based on iframe content? No, there isn't. The iframe itself belongs to the main page, and the filling of the iframe is the 'imported' page. You cannot have the contents of an imported page control an element on the main page. Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/#findComment-1295454 Share on other sites More sharing options...
nogray Posted December 8, 2011 Share Posted December 8, 2011 If the iframe and the page in the same domain, you can create a function in the main window to set the iframe height e.g. function set_iframe_height(num){ document.getElementById('my_iframe_id').style.height = num+'px'; } In your iframe page, you'll create an onload event that check the height and call the parent page function e.g. function onload_iframe_height(){ var h = Math.max( Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), Math.max(document.body.offsetHeight, document.documentElement.offsetHeight), Math.max(document.body.clientHeight, document.documentElement.clientHeight) ); window.parent.set_iframe_height(h); } .... <body onload="onload_iframe_height" ... not tested Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/#findComment-1295647 Share on other sites More sharing options...
Frank P Posted December 8, 2011 Share Posted December 8, 2011 nogray, How can you influence the iframe heigth in a parent page that is already loaded and rendered by a value that must come from the child page? You're a hero if you pull it off, but I don't see how. Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/#findComment-1295704 Share on other sites More sharing options...
nogray Posted December 8, 2011 Share Posted December 8, 2011 function set_iframe_height(num){document.getElementById('my_iframe_id').style.height = num+'px';} Put that function in your main page (the page that host the iframe) and call it from the iframe using window.parent.set_iframe_height Both pages need to be in the same domain Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/#findComment-1295858 Share on other sites More sharing options...
requinix Posted December 8, 2011 Share Posted December 8, 2011 How can you influence the iframe heigth in a parent page that is already loaded and rendered by a value that must come from the child page? Same way you'd influence anything after the page is already loaded and rendered: with JavaScript. The parent and child can access each other if they're on the same domain, so the parent could grab the height of the child content and resize the frame accordingly. Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/#findComment-1295903 Share on other sites More sharing options...
Frank P Posted December 9, 2011 Share Posted December 9, 2011 Same way you'd influence anything after the page is already loaded and rendered: with JavaScript. The parent and child can access each other if they're on the same domain, so the parent could grab the height of the child content and resize the frame accordingly. But what triggers the execution of the javascript on the parent page then, if that is already loaded and rendered? Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/#findComment-1296051 Share on other sites More sharing options...
Frank P Posted December 9, 2011 Share Posted December 9, 2011 With these two codes, being the parent and the child file, respectively, it doesn't work: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Iframe-parent.html</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div#parentDiv { width: 500px; height: 500px; border: 1px solid black; } </style> <script type="text/javascript"> /*<![CDATA[*/ function set_iframe_height(num) { document.getElementById('myIframe').style.height = num+'px'; } /*]]>*/ </script> </head> <body> <div id="parentDiv"> <iframe id="myIframe" style="width:450px;" src="Iframe-child.html"></iframe> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Iframe-child.html</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div#childDiv { width: 400px; height: 400px; border: 1px solid black; } </style> <script type="text/javascript"> /*<![CDATA[*/ function onload_iframe_height() { var h = Math.max( Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), Math.max(document.body.offsetHeight, document.documentElement.offsetHeight), Math.max(document.body.clientHeight, document.documentElement.clientHeight) ); // var h = 400; window.parent.set_iframe_height(h); } /*]]>*/ </script> </head> <body onload="onload_iframe_height"> <div id="childDiv"></div> </body> </html> Setting the child file's h at 400 still doesn't make it work. Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/#findComment-1296117 Share on other sites More sharing options...
nogray Posted December 9, 2011 Share Posted December 9, 2011 <body onload="onload_iframe_height()"> Make sure to add the parentheses after the function name in the onload event Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/#findComment-1296378 Share on other sites More sharing options...
Frank P Posted December 9, 2011 Share Posted December 9, 2011 <body onload="onload_iframe_height()"> Then it does work. Quite amazing. I didn't think security rules would allow that. Link to comment https://forums.phpfreaks.com/topic/252306-iframe-height/#findComment-1296387 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.