javascript跨域通信(二):window.name实现的跨域数据传输
2024-08-28 11:03:28
首先了解一下window.name这个东西是什么。
name 在浏览器环境中是一个全局/window对象的属性,当在 frame 中加载新页面时,name 的属性值依旧保持不变 并且name 属性仅对相同域名的 frame 可访问。由此我们可以继续下面的问题。
有三个页面:
- a.com/app.html:应用页面。
- a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。
- b.com/data.html:应用页面需要获取数据的页面,可称为数据页面。
实现起来基本步骤如下:
- 在应用页面(a.com/app.html)中创建一个iframe,把其src指向数据页面(b.com/data.html)。
数据页面会把数据附加到这个iframe的window.name上,data.html代码如下:
<script type="text/javascript">
window.name = 'I was there!'; // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右
// 数据格式可以自定义,如json、字符串
</script> - 在应用页面(a.com/app.html)中监听iframe的onload事件,在此事件中设置这个iframe的src指向本地域的代理文件(代理文件和应用页面在同一域下,所以可以相互通信)。app.html部分代码如下:
<script type="text/javascript">
var state = 0,
iframe = document.createElement('iframe'),
loadfn = function() {
if (state === 1) {
var data = iframe.contentWindow.name; // 读取数据
alert(data); //弹出'I was there!'
} else if (state === 0) {
state = 1;
iframe.contentWindow.location = "http://a.com/proxy.html"; // 设置的代理文件
}
};
iframe.src = 'http://b.com/data.html';
if (iframe.attachEvent) {
iframe.attachEvent('onload', loadfn);
} else {
iframe.onload = loadfn;
}
document.body.appendChild(iframe);
</script> - 获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。
<script type="text/javascript">
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
</script>
总结起来即:iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。
最新文章
- [ZZ] A Proposal For Compiling Direct3D HLSL With LLVM (Written by Michael Larabel )
- vCPU估算的几个基本概念
- 什么是 Help Desk?
- 如何使Session永不过期
- teambition的热血团队
- 盘点:崛起中的九大HTML5开发工具
- as 中的反射
- [DEncrypt] DESEncrypt--加密/解密帮助类 (转载)
- Strut2 采用token机制防御CSRF同时也可以防止表单重复提交
- PHP基础学习
- jeecg项目子窗口获得父窗口元素id
- 微信小程序实例--仿豆瓣电影
- 关于导入zepto出错的问题
- 51Nod1123 X^A Mod B 数论 中国剩余定理 原根 BSGS
- Web前端(整理不好,自己未学)
- atom - Emmet插件使用,代码快速填写
- 7 Serial Configuration 理解(二)
- java.lang.String cannot be cast to java.util.Date
- iOS开发学习-cocoapods的配置安装
- poj 1007 Quoit Design(分治)
热门文章
- git服务器的搭建
- Diagramming for WinForms 教程一(读取图元数据)
- cadence学习之原理图——连线
- 如何将PHP对象数组转换成普通数组
- 简单的python服务器程序
- c#:未将对象引用设置到对象的实例--可能出现的问题总结(转)
- ssh框架整合---- spring 4.0 + struts 2.3.16 + maven ss整合超简单实例
- PHP对自己I/O流访问的封装(转)
- python-->;基础-->;004-->;迭代器
- 第三章 深入 ZAB 协议