利用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 相关文章推荐
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
Python 的 Socket 编程
2015/03/24 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
介绍下static、final、abstract区别
2015/01/30 面试题
总经理助理岗位职责
2013/11/08 职场文书
文明教师事迹材料
2014/01/16 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
运动会入场词200字
2014/02/15 职场文书
安全生产目标责任书
2014/04/14 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
总结一些Java常用的加密算法
2021/06/11 Java/Android
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL