利用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 win 7透明弹出层效果的简单代码
Aug 06 Javascript
js Date概念详细介绍
Nov 22 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
js保留两位小数方法总结
Jan 31 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
vue实现购物车选择功能
Jan 10 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分页函数
2006/07/08 PHP
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
3种平台下安装php4经验点滴
2006/10/09 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
javascript document.images实例
2008/05/27 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
Python 错误和异常小结
2013/10/09 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
python实现简单俄罗斯方块
2020/03/13 Python
个人买房协议书范本
2014/10/06 职场文书
毕业横幅标语
2014/10/08 职场文书
艺术节开幕词
2015/01/28 职场文书
党员个人总结自评
2015/02/14 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
消防验收申请报告
2015/05/15 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang