利用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语言本身谈项目实战
Dec 27 Javascript
sina的lightbox效果。
Jan 09 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
php skymvc 一款轻量、简单的php
2011/06/28 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
python操作excel让工作自动化
2019/08/09 Python
Python hashlib模块实例使用详解
2019/12/24 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
Python os库常用操作代码汇总
2020/11/03 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
会计自我鉴定范文
2013/10/06 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
应届毕业生自荐书
2014/06/18 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python