利用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实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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&amp;mysql(一)
2006/10/09 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
JS面向对象编程浅析
2011/08/28 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python elasticsearch环境搭建详解
2019/09/02 Python
python实现静态web服务器
2019/09/03 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
python中的错误如何查看
2020/07/08 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
为什么UNION ALL比UNION快
2016/03/17 面试题
计算机操作自荐信
2013/12/07 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
镇创先争优活动总结
2014/08/28 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技