当前位置: 首页 > 编程日记 > 正文

window.name实现的跨域数据传输

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

这篇文章是对 JavaScript跨域总结与解决办法 的补充。

有三个页面:

  • a.com/app.html:应用页面。

  • a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。

  • b.com/data.html:应用页面需要获取数据的页面,可称为数据页面。

实现起来基本步骤如下:

  1. 在应用页面(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>
  2. 在应用页面(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>
  3. 获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)。

    <script type="text/javascript">iframe.contentWindow.document.write('');iframe.contentWindow.close();document.body.removeChild(iframe);
    </script>

总结起来即:iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。

参考文章:window.name Transport、Session variables without cookies、使用 window.name 解决跨域问题、利用window.name实现跨域访问的基本步骤、克军写的样例。


转载于:https://my.oschina.net/lichaoqiang/blog/317826

相关文章:

ajax frameworks(转贴)

Thinking in AJAX(三) —— AJAX框架汇总 引 此文原出于AJAX Patterns网站的一篇《Ajax Frameworks》的wiki文章&#xff0c;很早前我就注意到&#xff0c;后来在国内也有人翻译了&#xff0c;不过最近发现此wiki还是在不断添加维护中&#xff0c;截止此文发布前&#xff0c;作…

Maya角色面部表情动画制作视频教程 Maya: Facial Rigging

Maya角色面部表情动画制作视频教程 Maya: Facial Rigging Maya角色面部表情动画制作视频教程 Maya: Facial Rigging Maya角色面部表情动画制作视频教程 Maya: Facial Rigging MP4 |视频:h264&#xff0c;1280x720 |音频:AAC&#xff0c;44.1 KHz&#xff0c;2 Ch 语言&#x…

(一三〇)UITextField的光标操作扩展

简介 在iOS开发中&#xff0c;有时候需要完全自主的定义键盘&#xff0c;用于完整的单词输入&#xff0c;例如计算机应用中&#xff0c;需要一次性的输入sin(&#xff0c;在移动光标时要完整的跳过sin(&#xff0c;在删除时也要完整的删除&#xff0c;这就需要对光标的位置进行…

android 多个占位符,Android多语言支持:由于占位符计数不同导致的字符串格式问题...

我正在制作一个法语Android应用程序,我正在努力支持英语.我使用“占位符”来格式化我的字符串,因此我可以将它们调整为男性和女性用户.例如,我的s​​trings.xml文件中的这个字符串&#xff1a;Les %1$s sont compliqu%2$ss...将成为“Les hommessontcompliqus”(“男人很复杂”…

Docker入门六部曲——Swarm

原文链接&#xff1a;http://www.dubby.cn/detail.html?id8738 准备工作 安装Docker&#xff08;版本最低1.13&#xff09;。安装好Docker Compose&#xff0c;上一篇文章介绍过的。安装好Docker Machine&#xff0c;上一篇文章也提到了&#xff0c;Mac和Windows已经预先安装…

Ubuntu 查看磁盘空间大小命令转

df -hDf命令是linux系统以磁盘分区为单位查看文件系统&#xff0c;可以加上参数查看磁盘剩余空间信息&#xff0c;命令格式&#xff1a;df -hl显示格式为&#xff1a; 文件系统 容量 已用 可用 已用% 挂载点 Filesystem Size Used Avail Use% Moun…

MSSQLid清零

truncate table [cellphone2016].[dbo].[tp_phone_9]转载于:https://www.cnblogs.com/wangchuang/p/5259615.html

Blender 3D插图插画设计视频教程 Fantastic 3D illustration with Blender

Blender 3D插图插画设计视频教程 Fantastic 3D illustration with Blender Blender 3D插图插画设计视频教程 Fantastic 3D illustration with Blender Blender 3D插图插画设计视频教程 Fantastic 3D illustration with Blender Brellias |时长:1h 30m |视频:H264 1920x1080 |音…

Linux搜索文件&搜索文件名&替换文件内容

locate是Linux系统提供的一种快速检索全局文件的系统命令,它并不是真的去检索所以系统目录,而是检索一个数据库文件locatedb(Ubuntu系置/var/cache/locate/locatedb),该数据库文件包含了系统所有文件的路径索引信息,所以查找速度很快。time结尾的选项,其单位为天,min结尾的选项其单位为分钟,这些选项的值都为一个正负整数, 如+7,表示,7天以前被访问过的文件,-7表示7天以内被访问过的文件,7表示恰好7天前被访问的文件。:快速返回某个指定命令的位置信息。

Lock和Synchronize区别详解

synchronized是Java中的一个关键字,当我们调用它时会从在虚拟机指令层面加锁,关键字为monitorenter和monitorexitLock是Java中的一个接口,它有许多的实现类来为它提供各种功能,加锁的关键代码为大体为Lock和unLock;synchronized可对实例方法、静态方法和代码块加锁,相对应的,加锁前需要获得实例对象的锁或类对象的锁或指定对象的锁。说到底就是要先获得对象的监视器(即对象的锁)然后才能够进行相关操作。

android usb 触摸屏 apk,Android插入USB设备,自动弹出提示运行apk

USB HOST模式开发下可能会遇到这个问题。第一步是在AndroidManifest.xml文件中修改,主意下面红色字体......一般调用的activity都是Main和Lanunch入口&#xff0c;加入上面的action后&#xff0c;在SDK中以Run As Android Application时&#xff0c;仅执行安装动作&#xff0c;…

sskeychain使用(轻量级框架)

原文地址&#xff1a;http://www.ithao123.cn/content-2407927.html keychain的主要功能就是帮助用户安全地记住他的密码&#xff0c;keychain保存的密码文件都是经过加密的&#xff0c;其它人不能直接通过打开keychain的文件获得保存在keychain中的密码。在mac上可以安装钥匙串…

如何在团队中做好Code Review

一、Code Review的好处 想要做好Code Review&#xff0c;必须让参与的工程师充分认识到Code Review的好处 1、互相学习&#xff0c;彼此成就 无论是高手云集的架构师团队&#xff0c;还是以CURD为主的业务开发团队&#xff0c;大家的技术能力、经验都是有差异的。 通过Code…

分布式服务框架 Zookeeper -- 管理分布式环境中的数据

2019独角兽企业重金招聘Python工程师标准>>> 转自&#xff1a;http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目&#xff0c;它主要是用来解决分布式应用中经常遇到的一些数据管理问题&am…

ubuntu18下配置VS Code

配置逻辑主要是 launch.json指定预先处理的任务(preLaunchTask)及读取build文件(program) tasks.json指定输入原始文件和输入build文件(args) 参考:https://www.cnblogs.com/JsonZhangAA/p/9750282.html launch.json中的配置 {"version": "0.2.0","co…

Blender钢铁机器人建模与动画全流程制作视频教程

Blender钢铁机器人建模与动画全流程制作视频教程 流派:电子学习| MP4 |视频:h264&#xff0c;1280720 |音频:AAC&#xff0c;44.1 KHz 语言&#xff1a;英语中英文字幕&#xff08;根据原英文字幕机译更准确&#xff09; |大小:15.8 GB |时长:19.5小时 使用软件&#xff1a;…

android 模板 ui布局,Android UI布局

一、线性布局-LinearLayout(至上而下布局)其中android:orientation”vertical”意思为垂直方向的线性布局&#xff0c;此处的”vertical”可改为”horizontal”,意思是水平方向的线性布局。android:layout_width”match_parent”意思为这个控件的宽度占满整个屏幕或者父控件&am…

两数的加减乘除

设计思路&#xff1a; 首先要解决把输入的字符转化为计算的数字的问题&#xff0c;然后解决怎样用消息框输入输出即可。 程序流程图&#xff1a; 源代码&#xff1a; 实验结果&#xff1a; 转载于:https://www.cnblogs.com/wxyxxx/p/4859039.html

使用Docker搭建svn服务器教程

使用Docker搭建svn服务器教程 svn简介 SVN是Subversion的简称&#xff0c;是一个开放源代码的版本控制系统&#xff0c;相较于RCS、CVS&#xff0c;它采用了分支管理系统&#xff0c;它的设计目标就是取代CVS。互联网上很多版本控制服务已从CVS迁移到Subversion。说得简单一点…

SDK Instrumentation创建一个Note的实例

除了高层框架如Robotium的solo&#xff0c;我们也可以直接调用SDK底层的提供的Instrumentation的API来实现如前几篇文章描述的创建一个note的功能。总所周知之Robotium就是基于Instrumentation的框架高层抽象实现的一个项目&#xff0c;所以对比《Robotium创建一个Note的实例》…

UOJ #53.线段树区间修改

【题目描述】&#xff1a;如题&#xff0c;已知一个数列&#xff0c;你需要进行下面两种操作&#xff1a;1.将某区间每一个数加上x2.求出某区间每一个数的和 【输入描述】&#xff1a;第一行包含两个整数N、M&#xff0c;分别表示该数列数字的个数和操作的总个数。第二行包含N个…

Blender三维插图设计视频教程 3D Characters and Illustrations in Blender 2.9

Blender三维插图设计视频教程 3D Characters and Illustrations in Blender 2.9 MP4 |视频:h264&#xff0c;1920x1080 |音频:aac&#xff0c;44100 Hz |时长:16h:06分钟|文件大小:4.75 GB 流派:电子学习|语言:英语 云桥网络 平台 获取 教程 本课程详细介绍了blender 4个案…

android mac测试地址,android获取有线网的Mac地址

Android TV开发中有的机器会接有线网&#xff0c;需要获取Mac地址&#xff0c;下面是我测试的两种Mac地址的获取方式。1.一共两个方法&#xff0c;目前第二个方法获取的不准&#xff0c;最后一位数取的不对。private String getMacAddress(){String strMacAddr null;try {Inet…

[高中作文赏析]感受冬天

转载于:https://www.cnblogs.com/zhangzujin/p/4864725.html

2022-2028年中国文化产业园投资分析及前景预测报告(全卷)

【报告类型】产业研究 【报告价格】4500起 【出版时间】即时更新&#xff08;交付时间约3个工作日&#xff09; 【发布机构】智研瞻产业研究院 【报告格式】PDF版 本报告介绍了中国文化行业市场行业相关概述、中国文化行业市场行业运行环境、分析了中国文化行业市场行业的…

matlab 降维工具箱

Matlab Toolbox for Dimensionality Reduction降维方法包括&#xff1a;Principal Component Analysis (PCA) • Probabilistic PCA • Factor Analysis (FA) • Sammon mapping • Linear Discriminant Analysis (LDA) • Multidimensional scaling (MDS) • Isomap •…

程序还没写完只能当然计算器用,先发过来用着后面的慢慢写

真的是没办法&#xff0c;只好先发上来用着&#xff0c;后面的要先处理事情&#xff0c;等处理完接着写!! http://files.cnblogs.com/mari/starco.rar 这个是地址!!!转载于:https://www.cnblogs.com/mari/archive/2004/12/22/80317.html

Servlet生命周期与工作原理

Servlet生命周期分为三个阶段&#xff1a; 1&#xff0c;初始化阶段 调用init()方法 2&#xff0c;响应客户请求阶段 调用service()方法 3&#xff0c;终止阶段 调用destroy()方法 Servlet初始化阶段&#xff1a; 在下列时刻Servlet容器装载Servlet&#xff1a; 1&#…

ue4中面部动画制作视频教程 Facial Animation More In Unreal Engine 4

ue4中面部动画制作视频教程 Facial Animation & More In Unreal Engine 4 时长4h 包含项目文件 1920X1080 MP4 大小解压后&#xff1a;5.75G 语言&#xff1a;英语中英文字幕&#xff08;根据原英文字幕机译更准确&#xff09; 面部动画&虚幻引擎4中的更多内容 信息…

android c聊天功能,Android实现简单C/S聊天室应用

Android的网络应用&#xff1a;简单的C/S聊天室&#xff0c;供大家参考&#xff0c;具体内容如下服务器端&#xff1a;提供两个类创建ServerSocket监听的主类:MyServer.java负责处理每个Socket通信的线程类:ServerThread.java客户端&#xff1a;是一个Android应用程序>Multi…