Advanced Search

Resize iframe height based on it's content

/ Published in: JavaScript
Save to your folder(s)
Sometimes iframes are unavoidable, and in those cases you usually don't want it to be apparent there is one. This will find the height of the iframed contents and resize the iframe accordingly, making it appear to be part of the page. Almost positive there's a better way to do this but this worked the most consistently across browsers so I'm saving it here. Suggestions welcome, especially on methods to do the same in jQuery.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">
  2.  
  3. 		//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
  4. 		//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
  5. 		var iframeids=["iframe"]
  6.  
  7. 		//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
  8. 		var iframehide="no"
  9.  
  10. 		// The added height to add to the iframe, helps further prevent scrollbars when resizing the contents
  11. 		var extraHeight = 35;
  12.  
  13. 		function resizeCaller() {
  14. 			var dyniframe=new Array()
  15. 			for (i=0; i<iframeids.length; i++){
  16. 				if (document.getElementById)
  17. 					resizeIframe(iframeids)
  18. 				//reveal iframe for lower end browsers? (see var above):
  19. 				if ((document.all || document.getElementById) && iframehide=="no"){
  20. 					var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
  21. 					tempobj.style.display="block"
  22. 				}
  23. 			}
  24. 		}
  25.  
  26. 		function resizeIframe(frameid){
  27. 			var currentfr=document.getElementById(frameid)
  28. 			if (currentfr && !window.opera){
  29. 				currentfr.style.display="block"
  30. 				if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
  31. 				{	currentfr.height = currentfr.contentDocument.body.offsetHeight+extraHeight; }
  32. 				else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
  33. 				{	currentfr.height = currentfr.Document.body.scrollHeight+extraHeight;	}
  34. 				if (currentfr.addEventListener)
  35. 					currentfr.addEventListener("load", readjustIframe, false)
  36. 				else if (currentfr.attachEvent){
  37. 					currentfr.detachEvent("onload", readjustIframe) // Bug fix line
  38. 					currentfr.attachEvent("onload", readjustIframe)
  39. 				}
  40. 			}
  41. 		}
  42.  
  43. 		function readjustIframe(loadevt) {
  44. 			var crossevt=(window.event)? event : loadevt
  45. 			var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
  46. 			if (iframeroot)
  47. 				resizeIframe(iframeroot.id);
  48. 		}
  49.  
  50. 		function loadintoIframe(iframeid, url){
  51. 			if (document.getElementById)
  52. 				document.getElementById(iframeid).src=url
  53. 		}
  54.  
  55. 		if (window.addEventListener)
  56. 			window.addEventListener("load", resizeCaller, false)
  57. 		else if (window.attachEvent)
  58. 			window.attachEvent("onload", resizeCaller)
  59. 		else
  60. 			window.onload=resizeCaller
  61.  
  62. 	</script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.