根据内容调整 iframe 的大小

javascript iframe widget

2022-08-29 23:05:07

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

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

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

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

答案 1

我们遇到了这种类型的问题，但与您的情况略有不同 - 我们向其他域上的网站提供框架内容，因此相同的来源政策也是一个问题。经过花费大量时间搜索Google，我们最终找到了一个（在某种程度上..）可行的解决方案，您可以适应自己的需求。

有一种方法可以解决相同的源策略，但它需要对框架内容和框架页面进行更改，因此，如果您无法请求双方的更改，那么此方法恐怕对您来说不是很有用。

有一个浏览器怪癖，它允许我们绕过相同的源策略 - javascript可以与它自己的域上的页面进行通信，或者与它已经iframed的页面进行通信，但永远不会与它被框住的页面进行通信，例如，如果你有：

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

然后可以与（iframed）和（同一域）通信。home.htmlframed.htmlhelper.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可以向（iframed）发送消息，但不能（子级无法与父级进行跨域通信）。helper.htmlhome.html

这里的关键是可以接收来自的消息，也可以与进行通信。helper.htmlframed.htmlhome.html

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

我们发现将消息传递到的最简单方法是通过 URL 参数。为此，具有指定的 iframe。当它触发时，它会评估自己的高度，并将此时 iframe 的 src 设置为framed.htmlhelper.htmlframed.htmlsrc=''onloadhelper.html?height=N

这里有一个关于Facebook如何处理它的解释，这可能比我上面的稍微清楚一些！

法典

在中，需要以下 javascript 代码（顺便说一句，这可以从任何域上的 .js 文件加载..）：www.foo.com/home.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('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>

答案 2

如果您不需要处理来自不同域的iframe内容，请尝试此代码，它将完全解决问题，而且很简单：

<script language="JavaScript">
<!--
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>

<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>