Jump to content
localidiot

Iframe Auto Resize Height

Recommended Posts

function SetCwinHeight(){  var cwin=document.getElementById("cwin");  if (document.getElementById){	  if (cwin) {		  if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)			  cwin.height = cwin.contentDocument.body.offsetHeight;		  else if(cwin.Document && cwin.Document.body.scrollHeight)			  cwin.height = cwin.Document.body.scrollHeight;	  }  }}

<iframe src="somepagegoes.here.php?id=44" align="center" width="100%" id="cwin" name="cwin" onload="java script:SetCwinHeight()" frameborder="0" scrolling="no"></iframe>

This code works in IE, however it fails in all other browsers. I tried to find if any of the source is specific to IE and I failed that test. Is there anyway of turning this into browser friendly code?

Share this post


Link to post
Share on other sites

this works in all browsers<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>auto iframe height adjust</title><style></style><script type="text/javascript"><!--//function sizeFrame() { var F = document.getElementById("myFrame"); if(F.contentDocument) { F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome } else { F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome } } window.onload=sizeFrame; //--></script></head><body><iframe width="100%" id="myFrame" src="thispage.htm" scrolling="no" frameborder="0">An iframe capable browser isrequired to view this web site.</iframe></body></html>

Share this post


Link to post
Share on other sites
Brilliant, exactly what i was looking for. Thank you very much.
I am trying to extend this javascript with the ability to detect the element ID that is passed to the function using the onload function of the Iframe.
<script type="text/javascript"><!--//function sizeFrame(frameId) {var F = document.getElementById(frameId);if(F.contentDocument) {F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome} else {F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome}}window.onload=sizeFrame; //--></script>

<iframe width="100%" id="myFrame" src="testincludegallery.php?id=1" scrolling="no" frameborder="0" onload="window.parent.sizeFrame('myFrame');">

As of now I am hard coding the ID of the element. However I am stuck at an IE error that says object expected. It still appears to work in all browsers, however in ie i get the object error.

Edited by water boy

Share this post


Link to post
Share on other sites

Remove window.parent. If this code is in the <iframe> tag itself, the window is still the same window, unless you have a frame within a frame:

onload="sizeFrame('myFrame');"

Share this post


Link to post
Share on other sites
Remove window.parent. If this code is in the <iframe> tag itself, the window is still the same window, unless you have a frame within a frame:
onload="sizeFrame('myFrame');"

I still get an error about an object required. Any thoughts?I tried to run a debugger and got this in returne:uncaught exception TypeError: Cannot read property 'contentDocument' of null Edited by water boy

Share this post


Link to post
Share on other sites

try this<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>auto iframe height adjust</title><style></style><script type="text/javascript"><!--//function sizeFrame(frameId) { var F = document.getElementById(frameId); if(F.contentDocument) { F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome } else { F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome } }// window.onload=sizeFrame; //--></script></head><body><iframe width="100%" id="myFrame" src="aliens.htm" scrolling="no" frameborder="0" onload="sizeFrame('myFrame')">An iframe capable browser isrequired to view this web site.</iframe></body></html>

Share this post


Link to post
Share on other sites

Thank you for this really useful script, probably unique 100% working on the net. I applied it successfully on my site iframe. Actually it is for news script. However, one issue left, and it is "Back" link in full news view. It redirects page back to summary news list, but leaves the same height as the full news displayed. This also happens when browser back button is used. Any idea how to fix this would be highly appreciated. The page under question is www.cetinje.me (middle colomn is intended for news script) and it is in Serbian language, but you can easily get what I mean. "Back" link is called "Nazad".Waiting for your comments, Best regards!Pavle

Edited by luckystriko

Share this post


Link to post
Share on other sites

Hi,A new reply to an old topic but I wonder if anyone can help?I tried this code & it works a treat & dynamically resizes my pages to the size of the iFrame content beautifullyBUT...it only works in Safari & only when testing locally!I've tested it on both Mac & PC with Chrome, FF, IE (sigh..) but it only plays ball in Safari.When I upload to my server it doesn't work on anything Safari included.The iFrame is from an external URL which I gather means it won't work BUT it does works.Albeit offline.In Safari.Am I right in thinking that as it works in that, it should theoretically be able to work everywhere...?? thanks in advance :)

Share this post


Link to post
Share on other sites

Technically, Javascript should not have access to anything pertaining to another domain, so it shouldn't work. It's possble that the Safari developers enabled some cross-domain features that they thought were safe.

Share this post


Link to post
Share on other sites

I know this is an old post, but I tried both code listings and all it shows is about the top tenth of the content (I used a URL for the iFrame content). Tried three different sites and they all rendered the same across multiple browsers. Any idea why it cuts off the majority of the site?

Share this post


Link to post
Share on other sites

The code only works if the page you're displaying in the iframe is in the same domain as the parent page.

Share this post


Link to post
Share on other sites

This worked perfectly for me in Safari 6.0.2 for Mac, Firefox 3.0.1.9 for Windows, Chrome 25.0.1364.97m for Windows, Safari 5.0.2 for Windows, and IE8. In Opera 11.51 for Windows, Firefox 19.02 for Mac, and Chrome 25.0.1364.172 for Mac it only shows about the top 120 pixels (approximately). Is there something I can change in the Javascript to fix this? I should add that the page that the iframe is linking to IS on the same domain.

Edited by ndelc

Share this post


Link to post
Share on other sites

Are you getting any Javascript error messages on the console in the browsers where it's having problems?

Share this post


Link to post
Share on other sites

It sounds like a permission issue then, it looks like Firefox isn't allowing Javascript inside the frame access to the parent document. You may be able to use Firebug to drill down the DOM in the iframe to see what it can do with the contentDocument object.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...