Posted By

StevenW721 on 08/11/10


Tagged

iframe javascript height


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

mchadwick
romainsauger
Priestd09


Resize iframe height based on it's content


 / Published in: JavaScript
 

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.

  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  

You need to login to post a comment.