今天继续完善自己写的跨域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; })();
发表评论
-
HTML DOM架构研究
2012-01-20 10:12 544HTML DOM架构研究 2010年07 ... -
抠出淘宝的菜单树
2012-01-20 10:11 572抠出淘宝的菜单树 2010年08月17日 淘宝登陆用户的 ... -
再谈Iframe的问题
2012-01-20 10:11 554再谈Iframe的问题 2010年1 ... -
http中的request和session的关系。
2012-01-20 10:11 663http中的request和session的关系。 2010 ... -
大班下学期计划
2012-01-19 15:12 675大班下学期计划 2011年01月28日 大班下学期计划 ... -
大班下学期家长会发言稿
2012-01-19 15:12 1024大班下学期家长会发言 ... -
下学期个人工作计划
2012-01-19 15:12 648下学期个人工作计划 2010年06月26日 ... -
大班德育工作计划11
2012-01-19 15:12 720大班德育工作计划11 2011年02月18日 大班下学期 ... -
大班下学期家长会流程
2012-01-19 15:12 1367大班下学期家长会流程 2011年03月07日 家长会流程 ... -
观察者模式
2012-01-17 04:59 669观察者模式 2011年12月19日 class JPDe ... -
请列出你在从事DBA生涯中,最难以忘怀的一次误操作(1)
2012-01-17 04:59 569请列出你在从事DBA生涯中,最难以忘怀的一次误操作(1) 2 ... -
javabook
2012-01-17 04:59 701javabook 2010年07月09日 ... -
(转) How To Ask Questions The Smart Way 提问的智慧
2012-01-17 04:59 546(转) How To Ask Questions The ... -
perl 经典入门(2)
2012-01-17 04:59 736perl 经典入门(2) 2010年06 ... -
flex连接数据库总结
2012-01-16 03:50 647flex连接数据库总结 2010年01月11日 首先,做 ... -
43个热门Flex和ActionScript 3.0 APIs,技巧和工具
2012-01-16 03:50 55143个热门Flex和ActionScript 3.0 APIs ... -
【转载】[东华艺宗]网页游戏开发之Flex SDK 4命名空间
2012-01-16 03:50 596【转载】[东华艺宗]网页游戏开发之Flex SDK 4命名空间 ... -
Flex超酷皮肤主题推荐
2012-01-16 03:50 1690Flex超酷皮肤主题推荐 2009年07月29日 当程序 ... -
FLEX 做的不错的网站
2012-01-16 03:50 670FLEX 做的不错的网站 200 ...
相关推荐
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
iframe跨域嵌套自适应高度 iframe跨域嵌套 丢失session值(针对嵌套asp.net 做的网站)
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。
可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了
有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载
页面域关系: 主页面a.html所属域... 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b.
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;
前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码。
介绍: 填写的嵌入地址一定要和本页面在同一个站点上,否则会提示“拒绝访问!”。对跨域引用有权限问题,请查阅其他资料。
有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载
Iframe自适应高度一直都备受关注,接下来为大家介绍下同域名下Iframe自适应高度的处理以及跨域时Iframe高度自适应,感兴趣的朋友可以参考下哈
最近在做项目中,遇到一个问题,就是iframe高度的自适应问题,以下是解决办法
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引 发出同域、跨域两种情况。 同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器,控制id为...
A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小. 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的...
iframe的高度需要根据子页面的实际高度来进行调整,但是如果子页面不在同一域中怎么办?这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题