根据内容调整 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.

推荐答案

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

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.

有一种解决同源策略的方法，但是它需要在 iframe 内容和框架页面上进行更改，因此如果您没有能力在两侧请求更改，此方法将不会很有用对你来说，恐怕.

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 可以与自己域中的页面通信，也可以与它具有 iframe 的页面通信，但不能与框架中的页面通信，例如如果你有:

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的消息，并且还可以与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，然后可以调整 framed.html 所在的 iframe 的大小.

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