栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

根据内容调整iframe的大小

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

根据内容调整iframe的大小

我们遇到了这类问题,但与您的情况略有不同我们向其他域上的网站提供了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
(相同域)通信。

 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
加载时,它会计算出自己的高度,tells
helper.html
会将消息传递到
home.html
,然后可以调整其所在iframe的大小
framed.html

我们发现,从传递消息最简单的方法

framed.html
helper.html
是通过URL参数。为此,请指定
framed.html
一个iframe
src=''
。当它的
onload
火灾,它评估了自己的高度,并设置了iframe的src在这一点上
helper.html?height=N


在中

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>

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 cancommunicate with it to order the iframe window resizingto 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>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/432192.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号