为什么我的 iframe 没有调整大小以适应其内容？答案

【问题标题】：Why isn't my iframe resizing to fit its content?为什么我的 iframe 没有调整大小以适应其内容？
【发布时间】：2012-09-20 14:31:32
【问题描述】：

我正在尝试跨站点 iframe 调整大小，按照说明 here，但 iframe 仍未调整大小。我不确定我做错了什么。

iframe 当前位于http://ayeoui.com/testerpage.php。这会调用博客文章，该文章会在主 ayeoui.com 域上加载“helper.html”页面，理论上应该将信息传递回第一页并触发调整大小。主站点上的代码是这样说的：

<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>

链接的页面上又写有这段代码：

<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>

最后，这将我们带到帮助页面：

<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>

然而测试页面并没有改变！显然我做错了什么，但我不确定是什么。发生了什么事？

【问题讨论】：

innerWidth 和 innerHeight，或者只是 innerHeight？
将 document.body.scrollHeight 替换为 window.innerHeight；没有变化。

标签： javascript html css iframe resize

【解决方案1】：

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.

您的子域不匹配。 http://www.ayeoui.com 与 http://ayeoui.com 完全不同。

【讨论】：

【解决方案2】：

检查您的控制台是否有未捕获的错误类型。您正在从一页重定向到另一页，但 resizeIframe 函数在第二页上不起作用。您应该创建另一个 .js 文件并在链接该文件后调用该函数。应该可以的。

【讨论】：

【解决方案3】：

我不确定，但这可能是原因：您收到的是same origin policy error。

Chrome 开发工具中的控制台会记录此错误：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.

这是因为www.ayeoui.com 访问rinich.com。这是不允许的 (why?)。

您可以尝试确保所有内容都访问/访问同一域：ayeoui.com。

另外，另外，您可能需要考虑将seamless 属性添加到您的iframe，它只会让一切看起来更加整洁（在我看来）：

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

【讨论】：