js跨域问题之跨域iframe自适应大小实现代码
更新时间：2010年07月17日 18:29:52 作者：
前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码。
复制代码 代码如下:
<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二叉搜索树算法的相关资料,需要的朋友可以参考下2021-09-09
今天小编就为大家分享一篇关于js数组去重的方法总结，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了JavaScript检查数字是否为整数或浮点数的方法,涉及javascript类型判断的相关技巧,需要的朋友可以参考下2015-06-06
大数，即超出语言所能表示的数字最大范围的数字，那么如何实现两个大数相乘呢？下面有个不错的方法，大家可以参考下2014-04-04
这篇文章主要介绍了JavaScript之json，JSON它是一种数据交换格式。有兴趣的可以了解一下2017-06-06
本文介绍了如何自定义trim方法，trim的作用就是去除字符串前后空格,这个方法在字符串处理方面很有实用价值，需要的朋友可以参考下2015-07-07
本文主要介绍了js实现简单手风琴效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了Javascript常用小技巧,实例汇总了javascript运算符、表达式及遍历等常用技巧,需要的朋友可以参考下2015-06-06
这篇文章主要为大家介绍了Express代理转发服务器实现技巧详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了D3.js 实现带伸缩时间轴拓扑图的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
最新评论