Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
320 views
in Technique[技术] by (71.8m points)

javascript - 根据内容调整iframe的大小(Resizing an iframe based on content)

I am working on an iGoogle-like application.(我正在开发类似iGoogle的应用程序。)

Content from other applications (on other domains) is shown using iframes.(使用iframe显示其他应用程序(在其他域上)的内容。) How do I resize the iframes to fit the height of the iframes' content?(如何调整iframe的大小以适合iframe内容的高度?) I've tried to decipher the javascript Google uses but it's obfuscated, and searching the web has been fruitless so far.(我试图破译Google使用的javascript,但是它被混淆了,到目前为止,在网络上搜索毫无结果。) Update: Please note that content is loaded from other domains, so the same-origin policy applies.(更新:请注意,内容是从其他域加载的,因此适用同源策略 。)   ask by larssg translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.(我们遇到了这类问题,但与您的情况略有不同-我们向其他域上的网站提供了iframed内容,因此相同的来源政策也是一个问题。)

After many hours spent trawling google, we eventually found a (somewhat..) workable solution, which you may be able to adapt to your needs.(经过数小时的拖曳Google搜寻,我们最终找到了(某种程度上..)可行的解决方案,您也许可以适应您的需求。) 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.(有一种方法可以绕过相同的原始策略,但是它需要同时在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, eg if you have:(有一个浏览器怪癖,它使我们可以略过相同的原始策略-javascript可以与其自身域上的页面通信,也可以与其已被iframed的页面通信,但是不能与包含该页面的页面进行通信,例如,如果您具有:) www.foo.com/home.html, which iframes |-> www.bar.net/framed.html, which iframes |-> www.foo.com/helper.html then home.html can communicate with framed.html (iframed) and helper.html (same domain).(那么home.html可以与framed.htmlframed.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 can send messages to helper.html (iframed) but not home.html (child can't communicate cross-domain with parent).(framed.html可以将消息发送到helper.htmlhelper.html ),但不能将消息发送到home.html (子级无法与父级进行跨域通信)。) The key here is that helper.html can receive messages from framed.html , and can also communicate with home.html .(这里的关键是helper.html可以接收来自framed.html消息,并且还可以home.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 ,当framed.html加载时,它framed.html算出自己的高度,然后告诉helper.html ,它将消息传递给home.html ,然后home.html可以调整framed.html所在的iframe的大小。) The simplest way we found to pass messages from framed.html to helper.html was through a URL argument.(我们发现将消息从framed.html传递到helper.html的最简单方法是通过URL参数。) To do this, framed.html has an iframe with src='' specified.(为此, framed.html具有指定了src=''的iframe。) When its onload fires, it evaluates its own height, and sets the src of the iframe at this point to helper.html?height=N(当其onload触发时,它会评估自己的高度,然后将iframe的src设置为helper.html?height=N) There's an explanation here of how facebook handle it, which may be slightly clearer than mine above!(这里有一个关于Facebook如何处理的解释 ,这可能比上面的我的解释更清楚!) Code () In www.foo.com/home.html , the following javascript code is required (this can be loaded from a .js file on any domain, incidentally..):(在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> In 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> Contents of 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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...