window.name实现跨域数据传输
偶然间碰到个问题,通过JS给window.name赋值数组情况下,在firefox与chrome下会转换为字符串类型,在IE11下则显示正常。不说了,上图(firefox下):
代码:
<script type="text/javascript">
var name = [1,2,3];
console.log(typeof name);
console.log(name.length);
for(var i in name){
console.log(name[i]);
}
</script>
google了一下,发现可以通过window.name属性实现数据的跨域传输。
有三个页面:
- 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从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。
原文摘自:http://www.cnblogs.com/rainman/archive/2011/02/21/1960044.html
window.name实现跨域数据传输的更多相关文章
- window.name实现的跨域数据传输 JavaScript跨域总结与解决办法
原文地址: http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m4 什么是跨域 1.document.domain+ifr ...
- window.name 跨域数据传输
通过window.name可以实现跨域数据传输. 要解决的功能: www.a.com/a.html 需要获取到 www.b.com/b.html页面内容的数据 需要3个页面 www.a.com/a. ...
- window.name实现的跨域数据传输
这篇文章是对 JavaScript跨域总结与解决办法 的补充. 有三个页面: a.com/app.html:应用页面. a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件 ...
- 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- window.name实现跨域
在 http://www.cnblogs.com/zhuzhenwei918/p/6759459.html 这篇文章中,我提到了几种跨域的方式,这里主要讲解使用window.name实现跨域. 跨域就 ...
- 使用ADMT和PES实现window AD账户跨域迁移-介绍篇
使用 ADMT 和 pwdmig 实现 window AD 账户跨域迁移系列: 介绍篇 ADMT 安装 PES 的安装 ADMT:迁移组 ADMT:迁移用户 ADMT:计算机迁移 ADMT:报告生成 ...
- javascript跨域通信(二):window.name实现的跨域数据传输
首先了解一下window.name这个东西是什么. name 在浏览器环境中是一个全局/window对象的属性,当在 frame 中加载新页面时,name 的属性值依旧保持不变 并且name 属性仅对 ...
- JavaScript 跨域:window.postMessage 实现跨域通信
JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...
随机推荐
- l2tp连接不上,修复
启动依赖服务并设置为开机自启动 保存为.bat文件管理员权限执行 ::显示名称IPsec Policy Agent sc config "PolicyAgent" start= a ...
- 关于SpringMVC的全局异常处理器
近几天又温习了一下SpringMVC的运行机制以及原理 我理解的springmvc,是设计模式MVC中C层,也就是Controller(控制)层,常用的注解有@Controller.@RequestM ...
- AJAX中的同步加载与异步加载
AJAX是四个单词的简写,其中Asynchronous即异步的意思,异步的链接可以同时发起多个,并且不会阻止JS代码执行.与之对应的概念是同步,同步的链接在同一时刻只会有一个,并且会阻止后续JS代码的 ...
- PHP成生若干位防伪码的方法
public static function createCode($length =16) { $arr = array_merge(range(0, 9), range('a', 'z')); / ...
- 如何打造属于自己的Javascript武器库(封装方法)
前言 代码写的久了,就会发现很多时候都是在写一些重复的东西,这个时候就应该要考虑到提高工作效率了,比如对常用方法的封装,例如日期格式化,浏览器类型判断等. 今天这篇文章我们就来看看如何封装常用的Jav ...
- HDU 6305.RMQ Similar Sequence-笛卡尔树+数学期望 (2018 Multi-University Training Contest 1 1008)
6305.RMQ Similar Sequence 这个题的意思就是对于A,B两个序列,任意的l,r,如果RMQ(A,l,r)=RMQ(B,l,r),B序列里的数为[0,1]的实数,B的重量为B的所有 ...
- Peak
A sequence of \(n\) integers \(a_1, a_2, \dots, a_n\) is called a peak, if and only if there exists ...
- springmvc使用StringHttpMessageConverter需要配置编码
Spring controller 如下 @Controller public class SimpleController { @ResponseBody @RequestMapping(value ...
- Ubuntu 16.04没有/etc/default/rcS文件的UTC设置选项的问题解决
继续上一篇文章介绍了CentOS的时钟设置:http://www.cnblogs.com/EasonJim/p/8111747.html,大致的知道了BIOS在Linux的时区设置. 而现在关心的问题 ...
- 在SQL Server中查看对象依赖关系
原文 在SQL Server中查看对象依赖关系 Viewing object dependencies in SQL Server Deleting or changing objects may ...