游多多驿站分销iframe高度自适应解决方案

yangjayup

浏览: 247336 次
性别:
来自: 上海

最近访客更多访客>>

prouddragon

sun80264629

atianchen

随意而生

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

iframe web前端

在做分销的时候经常会遇到一种合作模式，就是提供内容页的iframe让分销商签到到自己的网页中。这种合作模式工作量小，开发进度快，但是有一个弊端就是iframe高度不可控制，原因就是iframe的引入是跨域的。在跨域的情况下父窗口无法获得被嵌套页面的高度，而且被嵌套页面也无法通过驻留在其服务器上的js修改父窗口Dom节点的属性。所以我们需要一个媒介，来获得被嵌套页面的高度同时又能修改主界面iframe节点的高度。

案例分析：网站主：多多驿站（www.yododo.cn）分销商：（www.qugow.com）

网站主提供内容页地址（http://hoteldistr.yododo.com?_id=5 ）用（B.html代称）分销频道网址（http://www.qugow.com/inn/）（用main.html代称），分销商提供的用来控制B.html高度的中间页A.html

思路如下： 在现有主界面main的域a下，被嵌套页面B下，被嵌套页面B又嵌套又嵌套一个在域a下的中间页面A，当用户打开浏览器访问main.html时候载入B，触发B的onload事件获取自身的高度，然后载入A，并将B的高度作为参数传给A的location对象，这样A就可以通过location.hash获得B的高度。由于A和main页面同域，所以可以修改main的dom节点属性，从而达到我们设置iframe标签高度的目的。

相关代码：

iframe的主页面：main.html

</div>

iframe嵌套页面：B.html

function sethash(){

hashH = document.body.scrollHeight; //获取自身高度

urlC = "${sessionScope.mm_distr.controlIframeUrl}"; //中间页url，调整iframe高度的为A.html

document.getElementById("contorlDistrIframe").src=urlC+"#"+hashH; //将高度作为参数传递

}

window.onload=sethash;

</script>

中间页面A.html：

<body>

var ifr = parent.parent.document.getElementById('inn');

var hash = window.location.hash;

if(hash){

hash = hash.replace('height=', '');

ifr.style.height = (parseInt(hash.split('#')[1]) + 10) + 'px';

}

</script>

</body>

参考文章：http://www.chinaz.com/web/2011/1123/222158.shtml

查看图片附件

分享到：

kissy瀑布流学习笔记 | java解析xml之DOM解析

2012-07-01 12:22
浏览 1121
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论