Jump to content

Iframe Auto Resize Height


localidiot
 Share

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?

Link to comment
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>

Link to comment
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
Link to comment
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');"

Link to comment
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
Link to comment
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>

Link to comment
Share on other sites

  • 1 year later...

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
Link to comment
Share on other sites

  • 8 months later...

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 :)

Link to comment
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.

Link to comment
Share on other sites

  • 1 year later...

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?

Link to comment
Share on other sites

  • 2 months later...

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
Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...