Why isn't my iframe resizing to fit its content?

Question

I'm attempting a cross-site iframe resize, following the instructions here, but the iframe remains unresized. I'm not sure what I'm doing wrong.

The iframe currently resides at http://ayeoui.com/testerpage.php. This makes a call to a blog post that in turn loads a "helper.html" page on the main ayeoui.com domain, which in theory should pass information back along to the first page and trigger a resize. The code on the main site says this:

<script>
  // Resize iframe to full height
  function resizeIframe(height)
  {
    // "+60" is a general rule of thumb to allow for differences in
    // IE & and FF height reporting, can be adjusted as required..
    document.getElementById('iframeid').height = parseInt(height)+60;
  }
</script>
<iframe id='iframeid' src='http://rinich.com/blog/11/index.html'></iframe>

The linked page in turn has this code written on it:

<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>

<script type="text/javascript">
  function iframeResizePipe()
  {
 // What's the page height?
     var height = document.body.scrollHeight;

     // Going to 'pipe' the data to the parent through the helpframe..
     var pipe = document.getElementById('helpframe');

     // Cachebuster a precaution here to stop browser caching interfering
     pipe.src = 'http://www.ayeoui.com/helper.html?height='+height+'&cacheb='+Math.random();

  }
</script>

And finally, that leads us to the helper page:

<html> 
<!-- 
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content 
-->  
  <body onload="parentIframeResize()"> 
    <script> 
      // Tell the parent iframe what height the iframe needs to be
      function parentIframeResize()
      {
         var height = getParam('height');
         // This works as our parent's parent is on our domain..
         parent.parent.resizeIframe(height);
      }

      // Helper function, parse param from request string
      function getParam( name )
      {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
          return "";
        else
          return results[1];
      }
     </script> 
  </body> 
</html>

Yet the tester page isn't changing a whit! Clearly I'm doing something wrong, but I'm not sure what. What's happening?

Substituted document.body.scrollHeight with window.innerHeight; no change. — user982244, Sep 20 '12 at 14:38

score 0 · Answer 1 · answered Aug 21 '13 at 18:09

Uncaught SecurityError: Blocked a frame with origin "http://www.ayeoui.com" from accessing a frame with origin "http://ayeoui.com". Protocols, domains, and ports must match.

Your subdomains don't match. http://www.ayeoui.com is completely different from http://ayeoui.com.

score 0 · Answer 2 · answered Oct 07 '16 at 13:37

Check your console for uncaught error type. You are redirecting from one page to another but the function resizeIframe is not working on the second page. You should make another .js file and call the function after linking that file. That should work.

score -1 · Answer 3 · edited Mar 17 '17 at 10:45

I'm not sure, but this might be the reason: you're getting a same origin policy error.

The console in Chrome's dev tools logs this error: Uncaught SecurityError: Blocked a frame with origin "http://www.ayeoui.com" from accessing a frame with origin "http://ayeoui.com". Protocols, domains, and ports must match.

This is because www.ayeoui.com accesses rinich.com. This isn't allowed (why?).

You could try ensuring everything accesses from/to the same domain: ayeoui.com.

Also, on a separate note, you might want to consider adding the seamless attribute to your iframe, it just makes everything look so much neater (in my opinion):

<iframe id="iframeid" src="http://rinich.com/blog/11/index.html" seamless></iframe>

Why isn't my iframe resizing to fit its content?

3 Answers3