localidiot Posted July 30, 2009 Share Posted July 30, 2009 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 More sharing options...
dsonesuk Posted July 30, 2009 Share Posted July 30, 2009 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 More sharing options...
localidiot Posted July 30, 2009 Author Share Posted July 30, 2009 Brilliant, exactly what i was looking for. Thank you very much. Link to comment Share on other sites More sharing options...
localidiot Posted July 31, 2009 Author Share Posted July 31, 2009 (edited) 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 July 31, 2009 by water boy Link to comment Share on other sites More sharing options...
Ingolme Posted July 31, 2009 Share Posted July 31, 2009 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 More sharing options...
localidiot Posted July 31, 2009 Author Share Posted July 31, 2009 (edited) 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 July 31, 2009 by water boy Link to comment Share on other sites More sharing options...
dsonesuk Posted July 31, 2009 Share Posted July 31, 2009 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 More sharing options...
luckystriko Posted March 13, 2011 Share Posted March 13, 2011 (edited) 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 March 13, 2011 by luckystriko Link to comment Share on other sites More sharing options...
jzebra Posted November 21, 2011 Share Posted November 21, 2011 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 More sharing options...
Ingolme Posted November 21, 2011 Share Posted November 21, 2011 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 More sharing options...
jzebra Posted November 21, 2011 Share Posted November 21, 2011 (edited) just for a minute, I thought I had it! - oh well, back to the drawing board :sorry:thanks for the swift reply! Edited November 21, 2011 by jzebra Link to comment Share on other sites More sharing options...
sstjohn Posted December 21, 2012 Share Posted December 21, 2012 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 More sharing options...
Ingolme Posted December 21, 2012 Share Posted December 21, 2012 The code only works if the page you're displaying in the iframe is in the same domain as the parent page. Link to comment Share on other sites More sharing options...
ndelc Posted March 15, 2013 Share Posted March 15, 2013 (edited) 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 March 15, 2013 by ndelc Link to comment Share on other sites More sharing options...
justsomeguy Posted March 15, 2013 Share Posted March 15, 2013 Are you getting any Javascript error messages on the console in the browsers where it's having problems? Link to comment Share on other sites More sharing options...
ndelc Posted March 15, 2013 Share Posted March 15, 2013 Yes, Firefox for Mac gives me this error: Timestamp: 3/15/13 5:36:36 PMError: Error: Permission denied to access property 'documentElement'Source File: http://lpnewmexico.com/blog.phpLine: 43 Line 43 has this code:F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome Link to comment Share on other sites More sharing options...
justsomeguy Posted March 15, 2013 Share Posted March 15, 2013 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 More sharing options...
ndelc Posted March 16, 2013 Share Posted March 16, 2013 That sounds complicated and I'm a Javascript novice. Any advice on what to look for? Link to comment Share on other sites More sharing options...
Raspberry Posted March 17, 2013 Share Posted March 17, 2013 You can use the new sandbox attribute for iframe with allow-scripts value. But it's an HTML5 feature, unsupported by IE<10 and Opera. iFrame sandbox Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now