CUED-迅雷用户体验设计中心

跨域iframe高度自适应

 

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域、跨域两种情况。

由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错误:Permission denied to access property 'document'。这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据。这意味着访问一个web服务的javascript代码通常只有在它也驻留在Web服务本身所在的同一个服务器的时候才有用。

所以在跨域情况下,我们遇到的问题就是:父窗口无法获得被嵌套页面的高度,而且被嵌套页面也无法通过驻留在其服务器上的js修改父窗口Dom节点的属性。所以我们需要一个媒介,来获得被嵌套页面的高度同时又能修改主界面iframe节点的高度。

思路:现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A。 当用户打开浏览器访问mail.html的时候载入B,触发B的onload事件获取其自身高度,然后B载入A,并将高度值作为参数赋值给A的location对象。这样A就可以通过location.hash获得B的高度。(location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一些非常有意义的事情。)。由于A和main页面同域,所以可以修改main的dom节点属性,从而达到我们设置iframe标签高度的目的。

 

关键代码:

iframe主页面:main.html

<iframe id="iframeB"  name="iframeB" src="www.b.com/B.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>

 

iframe嵌套页面:B.html

<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>

<script type="text/javascript">
function sethash(){
    hashH = document.documentElement.scrollHeight; //获取自身高度
    urlC = "www.a.com/A.html"; //设置iframeA的src
    document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递
}
window.onload=sethash;
</script>

中介页面:A.html

<script>
function  pseth() {
    var iObj = parent.parent.document.getElementById('iframeB');//A和main同域,所以可以访问节点
    iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash;//访问自己的location对象获取hash值
    iObj.style.height = iObjH.split("#")[1]+"px";//操作dom
}
pseth();
</script>

同域情况下就不用多说了,直接在被嵌套的页面B中获取其自身高度并操作其父窗口main的dom属性即可。

 

 

  1. js 说:

    对B有控制权,就不用那么麻烦了。在B上挂个js获取本身的高度,然后A用jsonp调一下就ok了

  2. 要不要这么华丽 说:

    牛b死了,虽然还是要修改引入的页面

  3. painie 说:

    A.html中 iObj.style.height = iObjH;这句有问题。
    虽然A.html页面与iobj的宿主页面main.html同域,但iObj的src已指向b.com,已与A.html不同域,因此 iObj.style.height = iObjH;这句还会受到阻塞,不能执行,不知楼主试验是怎么通过的?
    如能执行,我想原因只能是iobj还没加载完全,此时,iobj还与main.html同域,因此,A.html可自由支配它,如果是这个原因,那又何必弄的这么麻烦,直接在加载b.com前在main.html中操作即行。

  4. 蜡笔小鑫 说:

    请问下,如果被iframe的页面 高度不固定呢 ,比如说有 slideDown以及slideUp效果的页面如何做到自适应高度伸缩?

  5. […] http://cued.xunlei.com/log019 上一篇: HTML5设计原则 下一篇: 我做前端一年半 if (typeof DUOSHUO !== […]

  6. […] 跨域iframe高度自适应(兼容IE/FF/OP/Chrome) xwei | 2011-11-22 16:16  | 网页重构 […]

  7. 肿大了 说:

    哇,大家都说好,拿来测试下 ,先谢过了

  8. 破男孩 说:

    额,这个方法好

  9. […] 转载自:http://cued.xunlei.com/log019 […]

  10. 6995845 说:

    1V1跨域解决是非常好,但是如果多个页面引用B页面的话,那A页面又要和引用的那个父页面都在同级,B页面指向A页面地址就不好了,不可能复制多个B页面吧,求LZ能搞一个能多个通用的方法

  11. kylinwy 说:

    如果被嵌套页面没有修改的权限,即B.html页面只能调用,而不能加入JS文件,又该怎样处理呢?

  12. 不错对我很有启发.

  13. hey hey!! this is a very nice website here and I just wanted to comment & say that you’ve done a great job here! Very nice choice of colors & layout, very easy on the eyes.. Nicely done!…
    My blog is on educational toys for toddlers.

  14. 乏Feed 说:

    算是目前最好的解决方案吧。

  15. Does this site have a page on Facebook?

  16. iredbaby 说:

    不过这个代码有点问题 就是打开  B域名的时候右下角会有 黄色警告 显示拒绝访问。

    • leon 说:

      嗯,请问出现问题的浏览器版本是?如果是IE的话应该是将InPrivate设置为自动阻止了,许多网页会使用您正在访问的网站以外的网站上的内容,例如广告、地图或 Web 分析工具。InPrivate 筛选的目的主要是防止网站内容提供商收集有关您所访问的站点的信息。将InPrivate设置为“选择阻止”或“关闭”就本例不会出现警告的问题了。对于IE的这个问题这个方法还不是很完美,如果有高手有更好的方法,求指教!

  17. Hello there, I found your blog via Google at the same time as looking for a related topic, your website came up, it appears great. I’ve bookmarked it in my google bookmarks.

  18. 代码很强大啊,学习了。

  19. Helen 说:

    Thank you for such a fantastic web site. On what other blog could anyone get this kind of information written in such an insightful way? I have a presentation that I am just now working on, and I have been looking for such info.

  20. Thank you for such a fantastic web site. On what other blog could anyone get this kind of information written in such an insightful way? I have a presentation that I am just now working on, and I have been looking for such info.

  21. 次世界 说:

    强大,这是我看过最完美的解决方案。

  22. 提问网 说:

    迅雷就是强大 果然设置不同 学习了

  23. 卢松松 说:

    这段代码相当给力,找了好久终于找到合适的了,谢谢迅雷技术团队的分享

  24. 晗呀 说:

    要不要这么华丽丽呀

发表你的评论