小编典典

根据内容调整 iframe 的大小

all

我正在开发一个类似 iGoogle 的应用程序。来自其他应用程序(在其他域上)的内容使用 iframe 显示。

如何调整 iframe 的大小以适应 iframe 内容的高度?

我试图破译谷歌使用的 javascript,但它被混淆了,到目前为止搜索网络没有结果。


阅读 91

收藏
2022-03-11

共1个答案

小编典典

我们遇到了这种类型的问题,但与您的情况略有相反 - 我们将 iframe
内容提供给其他域上的站点,因此同源策略也是一个问题。在谷歌搜索了很多小时后,我们最终找到了一个(有点..)可行的解决方案,您可能能够适应您的需求。

有一种方法可以绕过同源策略,但它需要对 iframed 内容和框架页面进行更改,因此如果您无法在双方都请求更改,此方法对您来说不是很有用,我耽心。

有一个浏览器怪癖允许我们绕过同源策略 - javascript 可以与它​​自己域中的页面通信,或者与它具有 iframe
的页面通信,但不能与它被框架的页面通信,例如,如果你有:

 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(iframed)发送消息,但 不能 home.html(子不能与父跨域通信)。

这里的关键是helper.html可以接收来自 的消息framed.html,也可以与之 通信home.html

所以本质上,当framed.html加载时,它会计算出自己的高度,告诉helper.html,它将消息传递给home.html,然后它可以调整所在
iframe 的大小framed.html

framed.html我们发现从to传递消息的最简单方法helper.html是通过 URL 参数。为此,请指定framed.html一个
iframe src=''。当它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>
2022-03-11