今天继续完善自己写的跨域iframe自适应高

今天继续完善自己写的跨域iframe自适应高
2010年12月21日
  上回第三方反应说webkit内核的浏览器下,crossFrame.setHeight()不能设置预期的高度。打开一个短页面的话高度不会缩进,然后经过自己的测试,方向问题确实存在,主要是iframe下取到的document.body.scrollHeight不是实际的高度。
  然后到网上搜了一下其他获取高度的方法,试了一下,offsetHeight发现很完美的解决了这个问题。
  最后修改了一下之前的js,通过代理服务器,测试效果很好。
  这里贴出自己修改后的proxy.js /* * @create by yansong.pt@taobao.com * @time 2010/12/06 * @for 我的淘宝第三方运用跨域传输 * @description * 如果第三方引用的js库是jquery,那么初时化时的写法是: * $(document).ready(function(){ * crossFrame.init(); * }); * 如果第三方引用的js库是kissy,那么初时化时的写法是: * KISSY.ready(function(){ * crossFrame.init(); * }); * 如果第三方引用的js库是YUI,那么初时化时的写法是: * YAHOO.util.Event.onDOMReady(function(){ * crossFrame.init(); * }); * 或者放在body的最下方: * * 注: * 如果DOM结构是动态改变的话使用:setInterval(crossFrame.setHeight, 500); * 使用crossFrame.setHeight之前必须先初始化,也就是crossFrame.init(); * 如果想自定义高度的话,直接:crossFrame.init(500)//500为假设的高度 */ crossFrame = (function(){ var handle = {}; // 如果当前页面的域为我的淘宝就马上执行,但是本身这个js的域也和我的淘宝不一样,也就不能执行下面的语句了, // 所以忽略,还是在对应的页面里加上里面的那句话:window.top... 记得把页面的域变成taobao.com /*if(/taobao\.com/.test(document.domain)){ window.top.document.getElementById('crossFrame').s tyle.height = document.location.hash.substring(1)+'px'; }*/ // 当引用的iframe高度随时变化时使用: // 外部调用时为: setInterval(crossFrame.setHeight, 500); handle.setHeight = function(){ var frame = document.getElementById('crossFrame'), height = handle._height(); if(!frame)return; if(frame.src.split('#')[1] != height){ var parent = frame.parentNode; parent.innerHTML = parent.innerHTML.replace(/#(?:.*?)"/,['#',height.t oString(),'"'].join('')); parent = null; } frame = null; } //第一次设置iframe的高 //想来想去觉得加上url完全没有必要,所以去掉了之前的url,然后换成了height方便自定义高度 handle.init = function(height){ var el = document.createElement('div'), arr=[''); el.innerHTML = arr.join(''); //避免多次调用 handle.init = function(){}; el = null; } handle._height = function(){ //iframe下webkit内核的浏览器取到的clientHeight有误,故用offsetHeight代替。 return /AppleWebKit/.test(navigator.userAgent) ? document.body.offsetHeight : document.body.clientHeight; } return handle; })();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值