[转载]跨域iframe高度自适应
2015-11-29 14:59
260 查看
场景:
经常会有这样的需求,跟外部合作伙伴合作,要嵌入别人的页面,这时候就需要高度自适应了,在这种跨域的情况下如何解决呢?解决:
在iframe(合作伙伴的页面,称为P页面)中创建一个隐藏的iframe(称为M2页面),它的src与主页面(称为M1页面)同域,当P页面载入完成,计算出此页面的高度,然后创建隐藏iframe(M2页面),设置M2的src属性,将高度附加到M2的url后面,如http://localhost/proxy.html#height=582,代码:(function(){ window.onload = function(){ var w = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), h = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight), body = document.getElementsByTagName('body')[0], iframe = document.createElement('iframe'), proxyUrl = 'http://hsz-15128:88/proxy.html#'+w+'|'+h; iframe.setAttribute('src', proxyUrl); iframe.style.width = '0'; iframe.style.height = '0'; iframe.style.borderWidth = '0'; body.appendChild(iframe); } })();
然后在proxy.html页面中添加如下代码:
(function(){ window.onload = function(){ var hash = self.location.hash, index = hash.indexOf('#'), datas = [], w, h, piframe; if( index != -1){ datas = hash.substr(index+1).split('|'); w = datas[0]; h = datas[1]; piframe = parent.parent.document.getElementById('cross'); piframe.style.width = w +'px'; piframe.style.height = h + 'px'; } } })();
取得合作伙伴页面的高度并传给主页面,并重新设置主页面中iframe。
以上代码在一次项目中亲测可用,感谢@达不留
原文链接: http://my.oschina.net/forcoding/blog/67663?fromerr=T4ZnYlSh
相关文章推荐
- 带头节点的双向循环链表的增删查改
- 网页设计心得报告(2) 网站规划 by wrh
- 《算法竞赛入门经典2ndEdition 》例题3-5 生成元(Digit Generator, Uva1583)
- http协议基础
- 响应式布局
- canvas.save();和canvas.restore();
- 加载页面遮挡耗时操作任务页面--第三方开源之AndroidProgressLayout
- Android开发:页面跳转和数据传递
- Eclipse黑色主题,设置字体大小问题
- 【182】SeaDAS 相关处理
- Go 语言函数
- 快速理解RequireJs
- zzuli OJ 1120: 最值交换
- 深度学习概述
- Add Digits
- 对软件工程的一点看法
- Go 语言条件语句和循环语句
- Android开发:网络编程
- 高性能IO模型浅析
- 关于Canvas.drawText中xy位置问题