js跨域问题之跨域iframe自适应大小实现代码


Posted in Javascript onJuly 17, 2010
<body onload="javascript: setHeight();"> 
<script> 
function setHeight(){ 
var dHeight = document.documentElement.scrollHeight; 
var t = document.createElement("div"); 
t.innerHTML = '<iframe id="kxiframeagent" src="http://rest.kaixin001.com/api/agent.html#'+dHeight+'"scrolling="yes" height="0px" width="0px"></iframe>'; 
document.documentElement.appendChild(t.firstChild); 
} 
</script>

我想着跨域如何解决啊!后来去网上搜索了一下子 恍然大悟

具体如下 我是复制过来了 大家重点理解一下子它的实现思路 :

问题:

A域名下的页面a.htm中通过iframe嵌入B域名下的页面b.html,由于b.html的大小等是不可预知而且会变化的,所以需要 a.htm中的iframe自适应大小.

问题本质 :

js的跨域问题,因为要控制a.htm中iframe的大小就必须首先读取得到b.html的大小,A、B不属于同一个域,js的访问受限,读取不 到b.html的大小.

解决方案:

首先前提是A,B是合作关系,b.html中能引入A提供的js

首先a.html中通过iframe引入了b.html

<iframe id="aIframe" height="0" width="0" src="http://www.b.com/html/b.html" frameborder="no" border="0px" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" ></iframe> 
<iframe id="aIframe" height="0" width="0" src="http://www.b.com/html/b.html" frameborder="no" border="0px" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" ></iframe>

B在b.html中引入了A提供的js文件

Html代码

<script language="javascript" type="text/javascript" src="http://www.a.com/js/a.js"></script>

该js首先读取b.html的宽和高,然后创建一个iframe,src为和A同一个域的中间代理页面a_proxy.html,吧读取到的宽和 高设置到src的hash里面

Html代码

<iframe id="iframeProxy" height="0" width="0" src="http://www.a.com/html/a_proxy.html#width|height" style="display:none" ></iframe>

a_proxy.html是A域下提供好的中间代理页面,它负责读取location.hash里面的width和height的值,然后设置与 它同域下的a.html中的iframe的宽和高.

Js代码

var pParentFrame = parent.parent.document.getElementById("aIframe"); 
var locationUrlHash = parent.parent.frames["aIframe"].frames["iframeProxy"].location.hash; 
pParentFrame.style.width = locationUrlHash.split("#")[1].split("|")[0]+"px"; 
pParentFrame.style.height = locationUrlHash.split("#")[1].split("|")[1]+"px"; 
var pParentFrame = parent.parent.document.getElementById("aIframe"); 
var locationUrlHash = parent.parent.frames["aIframe"].frames["iframeProxy"].location.hash; 
pParentFrame.style.width = locationUrlHash.split("#")[1].split("|")[0]+"px"; 
pParentFrame.style.height = locationUrlHash.split("#")[1].split("|")[1]+"px";

这样的话a.html中的iframe就自适应为b.html的宽和高了.

其他一些类似js跨域操作问题也可以按这个思路去解决

Javascript 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
JS实现打砖块游戏
Feb 14 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 #Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 #Javascript
基于jquery的Repeater实现代码
Jul 17 #Javascript
javascript onmouseout 解决办法
Jul 17 #Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 #Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 #Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 #Javascript
You might like
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
javascript+mapbar实现地图定位
2010/04/09 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
前端性能优化及技巧
2016/05/06 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python操作qml对象过程详解
2019/09/26 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
python处理RSTP视频流过程解析
2020/01/11 Python
python数据爬下来保存的位置
2020/02/17 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
法务专员岗位职责
2014/01/02 职场文书
办理护照介绍信
2014/01/16 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
医德医风演讲稿
2014/05/20 职场文书
大学新闻系自荐书
2014/05/31 职场文书
如何写早恋检讨书
2014/09/10 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
2014年实习生工作总结
2014/11/27 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
太行山上观后感
2015/06/05 职场文书
办公室管理规章制度
2015/08/04 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
JavaScript实现音乐播放器
2022/08/14 Javascript