我正在开发类似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(相同域)通信。
home.html
framed.html
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
src=''
onload
helper.html?height=N
码
在中www.foo.com/home.html,需要以下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:
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:
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>