根据内容调整iframe大小 [英] Resizing an iframe based on content

问题描述

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

I am working on an iGoogle-like application. Content from other applications (on other domains) is shown using iframes.

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

How do I resize the iframes to fit the height of the iframes' content?

我试过了解密谷歌使用的javascript，但它被混淆了，到目前为止搜索网络一直没有结果。

I've tried to decipher the javascript Google uses but it's obfuscated, and searching the web has been fruitless so far.

更新：请注意内容已加载来自其他域名，因此同源政策适用。

Update: Please note that content is loaded from other domains, so the same-origin policy applies.

推荐答案

我们遇到了这种类型的问题，但与您的情况略有相反 - 我们向其他域上的网站提供了iframed内容，因此同源政策也是一个问题。经过长达数小时的谷歌搜索，我们最终找到了一个（有点......）可行的解决方案，您可以根据自己的需要进行调整。

We had this type of problem, but slightly in reverse to your situation - we were providing the iframed content to sites on other domains, so the same origin policy was also an issue. After many hours spent trawling google, we eventually found a (somewhat..) workable solution, which you may be able to adapt to your needs.

有一种方法可以解决问题相同的原始政策，但它需要更改iframed内容和框架页面，所以如果你无法双方请求更改，这种方法对你来说不会有用，我担心。

There is a way around the same origin policy, but it requires changes on both the iframed content and the framing page, so if you haven't the ability to request changes on both sides, this method won't be very useful to you, i'm afraid.

有一个浏览器怪癖可以让我们绕过相同的原始政策 - javascript可以与自己域名的网页进行通信，也可以与iframed的网页进行通信，但绝不会通过页面进行通信它是框架的，例如如果你有：

There's a browser quirk which allows us to skirt the same origin policy - javascript can communicate either with pages on its own domain, or with pages it has iframed, but never pages in which it is framed, e.g. if you have:

 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 （同一个域）进行通信。

then home.html can communicate with framed.html (iframed) and helper.html (same domain).

 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 （孩子不能与父母进行跨域沟通）。

framed.html can send messages to helper.html (iframed) but not home.html (child can't communicate cross-domain with parent).

这里的关键是 helper.html 可以从 framed.html 接收消息，而也可以与<$ c $进行通信 C> home.html的。

The key here is that helper.html can receive messages from framed.html, and can also communicate with home.html.

所以基本上，当 framed.html 加载时，它会计算出自己的高度，告诉 helper.html ，它将消息传递到 home.html ，然后可以调整其中框架的iframe的大小.html 坐着。

So essentially, when framed.html loads, it works out its own height, tells helper.html, which passes the message on to home.html, which can then resize the iframe in which framed.html sits.

我们发现将消息从 framed.html 传递到 helper.html的最简单方法是通过URL参数。为此， framed.html 有一个指定了 src =''的iframe。当 onload 触发时，它会评估自己的高度，并在此时将iframe的src设置为 helper.html？height = N

The simplest way we found to pass messages from framed.html to helper.html was through a URL argument. To do this, framed.html has an iframe with src='' specified. When its onload fires, it evaluates its own height, and sets the src of the iframe at this point to helper.html?height=N

这里有一个解释，说明facebook如何处理它，这可能比我的上面稍微清楚一点！

There's an explanation here of how facebook handle it, which may be slightly clearer than mine above!

---

代码

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

In www.foo.com/home.html, the following javascript code is required (this can be loaded from a .js file on any domain, incidentally..):

<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大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！