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


Posted in Javascript onMay 04, 2010

页面域关系:

主页面a.html所属域A:3water.com
被iframe的页面b.html所属域B:www.baidu.com,假设地址:http://www.baidu.com/b.html

实现效果:

A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小.

问题本质:

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

解决方案:

引入代理代理页面c.html与a.html所属相同域A,c.html是A域下提供好的中间代理页面,假设c.html的地址:3water.com/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽度和高度.

代码如下:

a.html代码

首先a.html中通过iframe引入了b.html

<iframe id=”b_iframe” height=”0″ width=”0″ src=”http://www.baidu.com/b.html” frameborder=”no” border=”0px” marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes” ></iframe>

b.html代码
<script type=”text/javascript”> 
var b_width = Math.max(document.documentElement.clientWidth,document.body.clientWidth); 
var b_height = Math.max(document.documentElement.clientHeight,document.body.clientHeight); 
var c_iframe = document.getElementById(”c_iframe”); 
c_iframe.src = c_iframe.src+”#”+b_width+”|”+b_height; //https://3water.com/c.html#width|height” 
} 
</script>

<!?js读取b.html的宽和高,把读取到的宽和高设置到和a.html在同一个域的中间代理页面车c.html的src的hash里面?>
<iframe id=”c_iframe” height=”0″ width=”0″ src=”https://3water.com/c.html” style=”display:none” ></iframe>

c.html代码

<script type=”text/javascript”> 
var b_iframe = parent.parent.document.getElementById(”b_iframe”); 
var hash_url = window.location.hash; 
var hash_width = hash_url.split(”#”)[1].split(”|”)[0]+”px”; 
var hash_height = hash_url.split(”#”)[1].split(”|”)[1]+”px”; 
b_iframe.style.width = hash_width; 
b_iframe.style.height = hash_height; 
</script>

a.html中的iframe就可以自适应为b.html的宽和高了.

其他一些类似js跨域操作问题也可以按这个思路去解决

如果不是跨域访问,可以参考这篇文章。iframe自适应高度的多种方法方法小结

Javascript 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
Array.prototype 的泛型应用分析
Apr 30 #Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 #Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 #Javascript
匹配任意字符的正则表达式写法
Apr 29 #Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 #Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 #Javascript
jQuery 工具函数学习资料
Apr 29 #Javascript
You might like
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
php自动适应范围的分页代码
2008/08/05 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
通信专业个人自我鉴定
2013/10/21 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
超越自我演讲稿
2014/05/21 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
水电维修专业推荐信
2014/09/06 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
委托书范本格式
2019/04/18 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python