`
boj22boj
  • 浏览: 14817 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

今天继续完善自己写的跨域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; })(); 
分享到:
评论

相关推荐

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

    iframe跨域自适应高度模板

    iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板

    iframe跨域嵌套自适应高度

    iframe跨域嵌套自适应高度 iframe跨域嵌套 丢失session值(针对嵌套asp.net 做的网站)

    完美解决跨域iframe的高度自适应

    完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。

    Iframe跨域自适应高度

    可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了

    iframe跨域高度自适应例子源码

    有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载

    利用location.hash实现跨域iframe自适应

    页面域关系: 主页面a.html所属域... 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b.

    iframe跨域常用问题和iframe页面自适应

    这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。

    iframe 跨域 自动适应高度

    iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;

    js跨域问题之跨域iframe自适应大小实现代码

    前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码。

    iframe自适应高度.rar

    介绍: 填写的嵌入地址一定要和本页面在同一个站点上,否则会提示“拒绝访问!”。对跨域引用有权限问题,请查阅其他资料。

    解决iframe跨域高度自适应问题的源码

    有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载

    JavaScript 处理Iframe自适应高度(同或不同域名下)

    Iframe自适应高度一直都备受关注,接下来为大家介绍下同域名下Iframe自适应高度的处理以及跨域时Iframe高度自适应,感兴趣的朋友可以参考下哈

    IFrame跨域高度自适应实现代码

    最近在做项目中,遇到一个问题,就是iframe高度的自适应问题,以下是解决办法

    Iframe 高度自适应(兼容IE/Firefox、同域/跨域)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引 发出同域、跨域两种情况。 同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器,控制id为...

    iframe 自适应大小实现代码

    A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小. 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的...

    如何设置iframe高度自适应在跨域情况下的可用方法

    iframe的高度需要根据子页面的实际高度来进行调整,但是如果子页面不在同一域中怎么办?这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题

Global site tag (gtag.js) - Google Analytics