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 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
jQuery选择器基础入门教程
May 10 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
JavaScript数组操作详解
Feb 04 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 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
如何在PHP程序中防止盗链
2008/04/09 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
JS实现图片切换效果
2018/11/17 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
自荐信怎么写好
2013/11/11 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
销售员岗位职责范本
2014/02/03 职场文书
高一化学教学反思
2014/02/05 职场文书
教师个人读书活动总结
2014/07/08 职场文书
植物生产学专业求职信
2014/08/08 职场文书
政府四风问题整改措施
2014/10/04 职场文书
单位考核聘任报告
2015/03/02 职场文书
期中考试后的感想
2015/08/07 职场文书
新学期主题班会
2015/08/17 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android