Grow your CSS skills. Land your dream job.

Last updated on:

Resize iFrame to Fit Content (Same Domain Only)

Normally you set and width and height for iframes. If the content inside is bigger, scrollbars have to suffice. The script below attempts to fix that by dynamically resizing the iframe to fit the content it loads.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript'>
    
    $(function(){
    
        var iFrames = $('iframe');
      
    	function iResize() {
    	
    		for (var i = 0, j = iFrames.length; i < j; i++) {
    		  iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
    	    }
    	    
        	if ($.browser.safari || $.browser.opera) { 
        	
        	   iFrames.load(function(){
        	       setTimeout(iResize, 0);
               });
            
        	   for (var i = 0, j = iFrames.length; i < j; i++) {
        			var iSource = iFrames[i].src;
        			iFrames[i].src = '';
        			iFrames[i].src = iSource;
               }
               
        	} else {
        	   iFrames.load(function() { 
        	       this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
        	   });
        	}
        
        });

</script>

Will resize an iframe like this:

<iframe src="content.html" class="iframe" scrolling="no" frameborder="0"></iframe>

 

View Demo

Still problematic...

  1. The source of the iframe content must reside on the same domain
  2. if the content inside the iframe changes height, this won't adapt
  3. I left Google Analytics code off the demo above, as when I added it in it seems to interfere and not resize the iframe, despite seemingly generating no errors.

Comments

  1. Permalink to comment#

    Excellent, this is exactly what I was looking for :)

    • Maku
      Permalink to comment#

      does anyone experienced bug on IE? …IE didnt resize the iframe instead it rendered a fixed height for the iframe. Any fix yet? Thanks

    • Leif

      Just what I needed! Awesome fix man. Thanks!

  2. Thall

    I doesnt work in IE 7 or 8. Tested in IETester

  3. Hi Chris, I’m wondering if you know of any script that would adapt the height of the iframe if the content inside the iframe changed height. Thanks!

  4. I am real new at this. Where within the page code do I put your code?

  5. MAN! this is what i needed, i dont know why i didnt think of it, absolute lifesaver

    -cheers

  6. dhana
    Permalink to comment#

    Hi,

    above code working in ie7 fine.but its not working in ie8.could u please send the code for that.

  7. excellent!
    thanks :D

  8. skyrail
    Permalink to comment#

    tested with success in IE9 for windows.
    Set doctype transitional on top of html code.

    Still need some tweaks to adjust the page width I want.

  9. Soshian
    Permalink to comment#

    Hello !!!
    Your code not work in chrome explorer ( your code = other codes ).
    Please send true code for me.
    thanks.

  10. Permalink to comment#

    hello everyone. same question here. where should i put script above.

    thank you

  11. Permalink to comment#

    Thanks for the script! I added styles to the iframe for IE, FF & Chrome.

    Thanks Muz

  12. George
    Permalink to comment#

    Thanks for the script. I decided to used it for now. If it breaks for different browsers I’ll try and think or find something else. Meanwhile I also found this:

    http://www.iframehtml.com/iframe-scripts.html#resizeable-iframe

    Thought I’d share it here. Seems easy and quick to use, the demo page works fine but this solution didn’t agree with my code.

  13. Stas
    Permalink to comment#

    Do not work with IE 6:(
    Maybe I can set minimal height?

  14. Permalink to comment#

    I got around the cross domain issue (atleast for subdomains) with
    document.domain = “yourdomain.com”

    • BDeMers
      Permalink to comment#

      Pardon my ignorance here but can you please explain where you inserted the document.domain?

  15. me
    Permalink to comment#

    Works like a charm. Thanks.

  16. Does anybody know how to do this when you embed a PDF in the iframe? I’m generating the PDF dynamically with a server-side script (ASP.NET MVC). The problem I’ve found is that, when the .load function, the PDF hasn’t been rendered to the iframe yet, so the “current” height is something like 150px (default maybe).

    Any ideas?

    (Great post by the way!)

  17. Try to add edit your code on if statement replace your code on this code, hope it works:

    if ($.browser.safari || $.browser.opera || $.browser.msie && $.browser.version==”6.0″) {

    iFrames.load(function(){
    setTimeout(iResize, 0);
    });

  18. tim
    Permalink to comment#

    The height DOES adapt to changing content in the iframe, in latest IE and Firefox!

  19. Thierry
    Permalink to comment#

    I am from Brasil and this tuto is show, show, show.
    excellent!
    thanks :D

  20. I didn’t think this was possible for some reason. I’m building a site right now with various tables loading from another site (sport scores). Being able to resize the iframe like this will make it look like part of the main site. Awesome!

  21. Permalink to comment#

    This works for me even on IE and it doesn’t require jQuery

    
    
  22. Christoph
    Permalink to comment#

    Hey, so is there maybe an update on this article? I have tried several versions and i still get problems with Safari for example. Is there really a workaround that works on all browsers IE7+?
    Cheers

  23. Shweta
    Permalink to comment#

    Hello,
    thanks for useful script.
    It works fine for file from same domain.
    But I want to show Google spreadsheet in iframe.
    and above script does not work for me.
    Please can you suggest solution.

  24. Halfist
    Permalink to comment#

    In Firebug I see next error:

    Error: Permission denied to access property ‘document’

    this.style.height = this.contentWindow.document.body.offsetHeight + ‘px’;

    • Hi, i am trying to add iframe blog using this code.

      Just want your help, how you removed that error ?

      Please reply.

      Thanks.

  25. Ayyash

    You can do the same by making the script run inside the iFrame body, when body loads, find the iframe in window.top and change its style height

    unfortunately I found a very nasty bug on IE9 (fixed in IE10), when I change height, it some how affects the main window, and rolls down my css media to match the rule that fits the iframe WIDTH! so if iframe width is 900px, it will render the whole page under media rule @media only screen and (max-width: 960px)

    :’( how do we prevent an iframe change in height from re-running the parent css media queries?

  26. Problematic issue #2 can be addressed with a touch of JS after the function! Here’s a trick @grahamkennery showed me:

    setInterval(iResize, 1000);

    Essentially this will ask the function to double-check its work every second. This is ideal if the source of the iframe changes size!

  27. Rico
    Permalink to comment#

    @ArleyM

    Either I don’t know where to put the setInterval(iResize, 1000);
    or it just doesn’t work.

    Hope it works and I’m just plain wrong

    Thanks!

    • Blake
      Permalink to comment#

      Hi Rico,
      This is working for me….

      var iFrames = $('.myFrame');
      
      function iResize() {
      
          for (var i = 0, j = iFrames.length; i < j; i++) {
            iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
      }
      
      if ($.support.safari || $.support.opera) { 
      
         iFrames.load(function(){
             setTimeout(iResize, 0);
         });
      
         for (var i = 0, j = iFrames.length; i < j; i++) {
              var iSource = iFrames[i].src;
              iFrames[i].src = '';
              iFrames[i].src = iSource;
         }
      
      } else {
         iFrames.load(function() { 
             this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
         });
      }
      
      setInterval(iResize, 1000);
      

      Also, note that recent versions of jQ need the if ($.browser.safari || $.browser.opera) { bit to be updated to if ($.support.safari || $.support.opera) {

      Hope this helps, Thanks!

  28. tin

    Wow.. nice stuff! thanks a lot

  29. Pranav Ballaney
    Permalink to comment#

    But what if it’s on another domain? Like, fb comments?

  30. mister
    Permalink to comment#

    Help Me
    How to add CSS class and control elements inside of the Iframe using javaScript…
    Please Please Help
    Thanks

  31. This worked perfect. I am impressed with it!

  32. hddung89
    Permalink to comment#

    thanks you, great tips

  33. Anbuselvan
    Permalink to comment#

    yes, its works ,thanks
    but
    1.i got the access denied error in script
    2. my Iframe have static content its working fine.
    3.if I have combox box ,based on that I can load the content.its not working.

    • Anbuselvan
      Permalink to comment#

      yes, its works ,thanks very much.

      while I load dynamic content ,I used
      //parent page
      function Resize() {
      var iFra = $(‘iframe’);
      for (var i = 0, j = iFra.length; i < j; i++) {
      iFra[i].style.height = iFra[i].contentWindow.document.body.offsetHeight + ‘px’;
      }
      }

      // Iframe page.
      parent.Resize();

  34. Lakshya
    Permalink to comment#

    That’s cool but I need codes for that when we click a text, a page with forms etc. comes up.

    • Anbuselvan
      Permalink to comment#

      This is My Parent Page: I Have two Iframe with different page with dynamic Content.

      <script type='text/javascript'>
          $(function () {
      
              var iFrames = $('iframe');
      
              function iResize() {
      
                  for (var i = 0, j = iFrames.length; i < j; i++) {
                      iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
                  }
              }
      
              if ($.browser.safari || $.browser.opera) {
      
                  iFrames.load(function () {
                      setTimeout(iResize, 0);
                  });
      
                  for (var i = 0, j = iFrames.length; i < j; i++) {
                      var iSource = iFrames[i].src;
                      iFrames[i].src = '';
                      iFrames[i].src = iSource;
                  }
      
              } else {
                  iFrames.load(function () {
                      this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                  });
              }
      
          });
      
          function Resize() {
              var iFra = $('iframe');
              for (var i = 0, j = iFra.length; i < j; i++) {
                  iFra[i].style.height = iFra[i].contentWindow.document.body.offsetHeight + 'px';
              }
          }
      

      Privacy Policy
      You may choose to give us personal information, such as your name and address or e-mail id that may be needed, for example, to correspond with you, to download our white papers or to provide you with a subscription. If you tell us that you do not want us to use this information as a basis for further contact with you, we will respect your wishes. We intend to protect the quality and integrity of your personally identifiable information.             

      Cookies, and other technologies

                       </div>
          <div  style="border: 1px solid Blue;">
      

      **

      **

      Anbuselvan

          <div>
      

      **

      **

      Iframe Page:

      In this I am used Combo and GridView .Based on Combo value the gridview row has been binded.
      (Dynamically Loaded data from DB.)

          function loadgrid() {
              var applyTimeList = document.getElementById('DropDownList1');
              var value = applyTimeList.options[applyTimeList.selectedIndex].value;
      
              $.ajax({
                  type: "POST",
                  url: "loadadminlist.aspx/CurrentUpdate",
                  data: '{name: "' + value + '" }',
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: OnSuccess,
                  failure: function (response) {
                      alert(response.d);
                  },
                  error: function (response) {
                      alert(response.d);
                  }
              });
          }
      
          function OnSuccess(response) {            
              var xmlDoc = $.parseXML(response.d);
              var xml = $(xmlDoc);
              var customers = xml.find("vpagetitle");
      
              var row = $("[id*=GridView1] tr:last-child").clone(true);
              $("[id*=GridView1] tr").not($("[id*=GridView1] tr:first-child")).remove();
              var $grid = $("[id*=GridView1]");
              for (i = 0; i < customers.length; i++) {               
                  var cont = "<tr><td>" + customers[i].textContent + "</td></tr>";
                  $grid.append(cont);
              }            
              parent.Resize();
          }
      
      
      
      
      </script>
      
          <div>
              <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="false" onchange="javscript:loadgrid();" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList>
          </div>
          <div>
              <br />
          </div>
          <div class="childdiv">
              <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" EmptyDataText="No data found!">
      
                  <Columns>
                      <asp:BoundField ItemStyle-Width="150px" DataField="vpagetitle" HeaderText="vpagetitle" />
                  </Columns>
              </asp:GridView>
          </div>
          <div>
              itanbuselvan@gmail.com        </div>
      
      </form>
      
  35. Tantan
    Permalink to comment#

    Not work for me

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".