javascript跨域通信(二):window.name实现的跨域数据传输
首先了解一下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从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。
javascript跨域通信(二):window.name实现的跨域数据传输的更多相关文章
- 跨域解决方案二:使用JSONP实现跨域
跨域的实现方式有多种,除了 上篇文章 提到的CORS外,常见的还有JSONP.HTML5.Flash.iframe.xhr2等. 这篇文章对JSONP的跨域原理进行了探索,并将我的心得记录在这里和大家 ...
- 使用 JSONP 实现跨域通信
简介 Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的 ...
- JavaScript 跨域:window.postMessage 实现跨域通信
JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...
- 【JavaScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...
- 使用window.postMessage实现跨域通信
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...
- 利用HTML5的window.postMessage实现跨域通信
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77 HTML5的window.postMessage简述 postM ...
- JavaScript系列----AJAX机制详解以及跨域通信
1.Ajax 1.1.Ajax简介 Ajax简介这一部分我们主要是谈一下ajax的起源,ajax是什么?因为这些是跟技术无关的.所以,大多细节都是一笔带过. Ajax的起源? Ajax一词源于2005 ...
- window.name实现的跨域数据传输 JavaScript跨域总结与解决办法
原文地址: http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m4 什么是跨域 1.document.domain+ifr ...
- 【13】javascript跨域通信
javascript跨域通信 同源:两个文档同源需满足 协议相同 域名相同 端口相同 跨域通信方法: 01,通过设置img,script,link,iframe元素的src,href属性为目标url. ...
- Javascript使用postMessage对iframe跨域通信
今天才发现原来有这么个好东西啊,跨域通信太方便了, 举个小栗子: 共两个页面, 页面1:www.a.com/a.html 页面2:www.b.com/b.html 实现目标:两个网站页面实现跨域相互通 ...
随机推荐
- spi_flash
http://blog.chinaunix.net/uid-27406766-id-3384699.html
- html() 和 text() 方法的区别
html()方法仅支持XHTML的文档,不能用于XML文档,而text()既支持HTML文档,也 支持XML文档. html():没有参数,用于获取html的值: html(val):有参数,用于设置 ...
- R--相关分布函数、统计函数的使用
分布函数家族: *func()r : 随机分布函数d : 概率密度函数p : 累积分布函数q : 分位数函数 func()表示具体的名称如下表: 例子 #r : 随机分布函数 #d : 概率密度函数 ...
- Python:装饰器
格式:在执行的参数前加上@functon 例1:传一个参数 #模拟验证功能 def login(auth): def fun(arg): #为了避免程序一执行的时候就执行验证,需要再加一层函数. pr ...
- PHP static关键字
声明类成员或方法为static,就可以不实例化类而直接访问.不能通过一个对象来访问其中的静态成员(静态方法除外). 为了兼容PHP4,如果没有指定“可见性”,属性和方法默认为public. 由于静态方 ...
- linux 清理内存命令 查看内存命令
查看内存: 我们可以用free命令查看内存信息: free -g total used free shared buffers cachedMem: 15 15 0 0 ...
- Pig Hive对比(zz)
Pig Latin:数据流编程语言 一个Pig Latin程序是相对于输入的一步步操作.其中每一步都是对数据的一个简单的变换. 用Pig Latin编程更像在RDBMS中“查询规划器”(query p ...
- Unity3D 中 用quaternion 来对一个坐标点进行旋转的初步体会
在unity3d中,用四元数来表示旋转,四元数英文名叫quaternion . 比如 transform.rotation 就是一个四元数,其由四个部分组成 Quaternion = (xi + yj ...
- C3P0连接池连接MySQL出现的问题
1.Clearing pending acquires. While trying to acquire a needed new resource, we failed to succeed mor ...
- jsp_属性范围_session
session属性设置后,不管是客户端跳转还是服务器端跳转,只要属性设置了就可以取得. 下面写个小例子来验证一下: (1)session_demo.jsp <%@ page contentTyp ...