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. Quote Link to comment 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 Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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. Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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. Quote Link to comment 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? Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.