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 相关文章推荐
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
js同源策略详解
May 21 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
vue-hook-form使用详解
Apr 07 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 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
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
php和html的区别点详细总结
2019/09/24 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
javascript 特殊字符串
2009/02/25 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
微信小程序 图片边框解决方法
2017/01/16 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
vue内置指令详解
2018/04/03 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
实验教师岗位职责
2014/02/13 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
婚礼主持词开场白
2014/03/13 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
单位活动策划方案
2014/08/17 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
预备党员考察意见范文
2015/06/01 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
Hive常用日期格式转换语法
2022/06/25 数据库
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript