根据内容调整iframe的大小

薛修能

2023-03-14

问题内容：

我正在开发类似iGoogle的应用程序。使用iframe显示其他应用程序（在其他域上）的内容。

如何调整iframe的大小以适合iframe内容的高度？

我试图破译Google使用的javascript，但它被混淆了，到目前为止，在网络上搜索毫无结果。

更新： 请注意，内容是从其他域加载的，因此适用同源策略。

问题答案：

我们遇到了这类问题，但与您的情况略有不同我们向其他域上的网站提供了iframed内容，因此相同的来源政策也是一个问题。经过数小时的拖曳Google搜寻，我们最终找到了（某种程度上..）可行的解决方案，您也许可以适应您的需求。

有一种方法可以绕过相同的原始策略，但是它需要在iframed内容和框架页面上都进行更改，因此，如果您无法在两面都请求更改，则此方法对您将不会很有用，我耽心。

有一个浏览器怪癖，它使我们可以略过相同的原始策略-
javascript可以与其自身域上的页面通信，也可以与其已被iframed的页面通信，但是不能与包含该页面的页面通信，例如，如果您具有：

 www.foo.com/home.html, which iframes
 |-> www.bar.net/framed.html, which iframes
     |-> www.foo.com/helper.html

然后home.html可以与framed.html（iframed）和helper.html（相同域）通信。

 Communication options for each page:
 +-------------------------+-----------+-------------+-------------+
 |                         | home.html | framed.html | helper.html |
 +-------------------------+-----------+-------------+-------------+
 | www.foo.com/home.html   |    N/A    |     YES     |     YES     |
 | www.bar.net/framed.html |    NO     |     N/A     |     YES     |
 | www.foo.com/helper.html |    YES    |     YES     |     N/A     |
 +-------------------------+-----------+-------------+-------------+

framed.html可以向helper.html（iframe）发送邮件，但不能home.html（子级无法与父级进行跨域通信）发送消息。

这里的关键是，helper.html能够接收来自消息framed.html，并且 还可以沟通 与home.html。

因此，从本质上讲，在framed.html加载时，它会计算出自己的高度，tellshelper.html会将消息传递到home.html，然后可以调整其所在iframe的大小framed.html。

我们发现，从传递消息最简单的方法framed.html来helper.html是通过URL参数。为此，请指定framed.html一个iframesrc=''。当它的onload火灾，它评估了自己的高度，并设置了iframe的src在这一点上helper.html?height=N

码

在中www.foo.com/home.html，需要以下javascript代码（顺便说一下，可以从任何域上的.js文件加载该代码）：

<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('frame_name_here').height = parseInt(height)+60;
  }
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>

在www.bar.net/framed.html：

<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.foo.com/helper.html?height='+height+'&cacheb='+Math.random();

  }
</script>

内容www.foo.com/helper.html：

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

根据内容调整iframe的大小

相关阅读

相关文章

相关问答

相关工具

相关文档