window.name跨域实现
有三个页面:
- a.com/app.html:应用页面。
- a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。
- b.com/data.html:应用页面需要获取数据的页面,可称为数据页面。
原理: a.com/app.html 中通过javascript创建iframe,并将location指向b.com/data.html,
并监听iframe的dom onload,
加载完毕后修改location指向a.com/proxy.html
实现步骤:
1. a.com/app.html 的head元素中一段javascript代码
<script type="text/javascript">
window.onload = function(){
var state = 0,
iframe = document.createElement('iframe'),
iframe.src = 'b.com/data.html'; // 这里会触发onload事件
loadfn = function() {
if (state == 1) {
var data = iframe.contentWindow.name; // 读取数据
alert(data); //弹出 'xxxxx'
// 获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
} else if (state == 0) {
state = 1;
iframe.contentWindow.location = "a.com/proxy.html"; // 设置的代理文件,再次触发onload事件,
// 如果不指向本域,由于跨域访问限制原因,window.name还是无法访问的,
}
};
if (iframe.attachEvent) {
iframe.attachEvent('onload', loadfn);
} else {
iframe.onload = loadfn;
}
document.body.appendChild(iframe);
};
</script>
2. b.com/data.html 设置数据
<script type=”text/javascript” >
window.name=”xxxxx”;
/* xxxxx就是要传输的数据。将数据放到window.name中供不同域的web程序使用;
数据大小限制不同浏览器要求不同 ie ,firefox貌似为32m,其余为2m好像 ,类型可为json,字符串*/
</script>
3. a.com/proxy.html 不需要有任何代码
总结:iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。
这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。
附:iframe加载跨域文件,高度自适应:
1、a.com/app.html 的javascript代码
<script type="text/javascript">
$(function(){
iframeAutoHeight();
});
function iframeAutoHeight(){
var state = 0;
loadfn = function(ifmId,url){
iframe = document.getElementById(ifmId);
if (state == 1) {
var data = iframe.contentWindow.name; // 2、读取跨域传递的数据,此处name中为加载内容的窗口高度
iframe.height = data-0;
state = 2;
iframe.src = url; // 3、指回跨域文件路径
} else if (state == 0) {
state = 1;
iframe.contentWindow.location = "a.com/proxy.html"; /* 1、设置的代理文件,
是为了 "var data = iframe.contentWindow.name;"能正常执行 */
}
}
$("iframe[linkURL]").each(function(){ // 只对特定条件的iframe绑定onload事件:此处为有自定义属性"linkURL"
var iframe = $(this);
var ifmId = iframe.attr("id");
var url = iframe.attr("linkURL"); // linkURL 为iframe自定义一个属性,存放跨域地址,此处为:b.com/data.html
iframe.on("load",function(){
loadfn(ifmId,url);
});
});
}
</script>
a.com/app.html的html部分:
<iframe src="b.com/data.html" linkURL="b.com/data.html"></iframe>
2、 b.com/data.html 设置数据
<script type="text/javascript">
$(function(){
iframeHeight();
});
function iframeHeight(){
var doc = window.document,
html = doc.documentElement,
body = doc.body;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
window.name = height; // 将高度存放到window.name中进行跨域传输
}
</script>