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 相关文章推荐
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
JavaScript中操作字符串小结
May 04 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
php学习 字符串课件
2008/06/15 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php中文验证码实现方法
2015/06/18 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
《雨霖铃》听课反思
2014/02/13 职场文书
普通党员对照检查材料
2014/09/24 职场文书