javascript跨域总结之window.name实现的跨域数据传输


Posted in Javascript onNovember 01, 2015

自己实践了一下,真的很好用。特将具体实现方法记录如下

有三个页面:

    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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 #Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 #Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 #Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 #Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 #Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 #Javascript
js实现点击获取验证码倒计时效果
Jan 28 #Javascript
You might like
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
python isinstance函数用法详解
2020/02/13 Python
python实现简单颜色识别程序
2020/02/19 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
北京SQL新华信咨询
2016/09/30 面试题
C#怎么让一个窗口居中显示?
2015/10/20 面试题
护理专业自荐信
2013/12/03 职场文书
卫生安全检查制度
2014/02/04 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
学校运动会广播稿
2014/10/11 职场文书
中秋节慰问信
2015/02/15 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android