利用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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
原生JS实现音乐播放器
Jan 26 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
与文件上传有关的php配置参数总结
2013/06/14 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
js实现select下拉框选择
2020/01/11 Javascript
python self,cls,decorator的理解
2009/07/13 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
Python xlwt模块使用代码实例
2020/06/10 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
心理学专业毕业生推荐信范文
2013/11/21 职场文书
大学四年学习的自我评价分享
2013/12/09 职场文书
酒吧创业计划书
2014/01/18 职场文书
节能宣传周活动总结
2014/05/08 职场文书
数学系毕业生求职信
2014/05/29 职场文书
三严三实对照检查材料
2014/08/25 职场文书
校长个人总结
2015/03/03 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
Minikube搭建Kubernetes集群
2022/03/31 Servers
Java设计模式之代理模式
2022/04/22 Java/Android