window.name 跨域
跨域的由来
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但是我们常常会遇到无法避免跨域的情况,如普通文章站点(article.xxx.com)需要评论,而评论站点却在cheat.xxx.com的情况。
跨域限制情况
在不同端口,不同协议,不同域名,域名和域名对应ip,主域相同,子域不同 都会产生同域限制,然而目前前端还无法解决,我们能解决的知识跨父域的情况(如上面说的article.xxx.com取得cheat.xxx.com)。
跨域的方法有很多,本文就谈谈使用window.name跨域
如开头提到的,我们需要在article.xxx.com和cheat.xxx.com跨域
实现原理:
window.name在同个页面间的iframe直接是共用的一个属性,以此为原理,我们就这么做
1、在article.xxx.com的页面中将要传输的数据存储在window.name里面,以及提供回调用的处理函数
2、新建iframe路径指向cheat.xxx.com域名的页面(crossproxy.html),然后在iframe获取window.name中的传输数据,提交给后端(同域传输了,呵呵)
3、iframe 将后端返回的数据存储在window.name里面, 再将此iframe的路径指向article.xxx.com域名的页面(redirect.html)
4、iframe执行父页面的回调函数
准备工作
在cheat.xxx.com建立crossproxy.html作为发数据所用
在article.xxx.com建立redirect.html作为返回回调函数使用
开始写代码了:
在article.xxx.com新建下面的方法
var crossDomainId = 0; //作为每次不同使用crosspost的标识
/*param包含
@param.action 请求action
@param.param 请求数据
@param.redirUrl iframe重定向的链接
*/
function crosspost (param,cb) {
var g = $('<iframe id='+iframe.crossDomainId+' ></iframe>').appendTo('body').attr('src', 'http://cheat.xxx.com');
var _param = json.JSON.stringify($.extend(true, param, {id:'cb'+crossDomainId})); g[0].contentWindow.name = _param;
window.redirectCallback['cb'+crossDomainId] = function () {
cb&&cb(window.name[data]);
g.remove();
}
crossDomainId++;
}
cheat.xxx.com/crossproxy.html代码
try{
var data=JSON.parse(window.name),id=data.id,redirUrl=data.redirUrl;
$.post(data.action,data.param,'json').done(function(data){
window.name=JSON.stringify($.extend(true, {data:data}, {id:id})); location.href=redirUrl; }).fail(function(){
window.name=data;
location.href=redirUrl
});
}catch(e){}
article.xxx.com/redirect.html代码
var data=JSON.parse(window.name);
var id = data[id];
try{
top.redirectCallback(param.id);
}catch(e){ }
优化:
以上代码在crossDomainId和url参数,可以使用location.search在父页面和iframe间传输,可降低window.name的复杂度
原页面使用defferd的写法,在使用的时候能够更加优雅
跨域的方法有很多,之前写过一篇jsonp跨域的文章http://www.cnblogs.com/peace1/p/4517279.html,写的比较简单
window.name 跨域的更多相关文章
- JS window.name跨域封装
JS window.name 跨域封装 function CrossDomainName(target, agent, callback, security) { if (typeof target ...
- window.name跨域
window.name? 每一个页面都有一个自己的window,而window.name是window的名字. window.name跨域原理 window对象有个name属性,该属性有个特征:即在一 ...
- window.returnValue跨域传值问题[转]
主页面用window.showModalDialog的时候,如果直接打开其它系统的页面,这时候别人的页面在window.returnValue=1;这样返回值的时候,主页面是取不到返回值的,原因就是因 ...
- HTML5 window/iframe跨域传递消息 API
原文地址:HTML5′s window.postMessage API 在线示例:Using HTML5's window.postMessage(请打开控制台看日志) 原文日期: 2010年09月0 ...
- (二)文档请求不同源之window.name跨域
一.基本原理 window.name不是一个普通的全局变量,而是当前窗口的名字.这里要注意的是每个iframe都有包裹它的window,而这个window 是top window的子窗口,而它自然也有 ...
- (二)文档请求不同源之window.postMessage跨域
一.基本原理 HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging).这个API为window对象新增了一个window.postMessage方法,允许跨 ...
- window.name跨域实现
参考:window.name实现的跨域数据传输 有三个页面: a.com/app.html:应用页面. a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面 ...
- window.name 跨域数据传输
通过window.name可以实现跨域数据传输. 要解决的功能: www.a.com/a.html 需要获取到 www.b.com/b.html页面内容的数据 需要3个页面 www.a.com/a. ...
- HTML5之worker开启JS多线程模式及window.postMessage跨域
worker概述 worker基本使用 window下的postMessage worker多线程的应用 一.worker概述 web worker实际上是开启js异步执行的一种方式.在html5之前 ...
随机推荐
- C#自学笔记总结
一.变量:声明变量的语法:变量类型 变量名; 变量名=值;变量类型 变量名=值: 在使用变量的时候要注意:变量一定要先声明,再赋值,最后使用例子: 变量的特点:1.不能够被重复的声明2.可以被重复的赋 ...
- Java面试题集(1-50)
下面的内容是对网上原有的面试题集及答案进行了全面修订之后的内容(原来的题目有很多重复无用的题以及错误的答案),参照了JDK最新版本,删除了重复题目以及EJB2.x等无用内容,补充最新面试题.知识点巩固 ...
- 提高你开发效率的十五个Visual Studio 2010使用技巧
提高你开发效率的十五个Visual Studio 2010使用技巧 相信做开发的没有不重视效率的.开发C#,VB的都知道,我们很依赖VS,或者说,我们很感谢VS.能够对一个IDE产生依赖,说明这个ID ...
- AOP 笔记
http://blog.csdn.net/Intlgj/article/details/5671248 这篇文章里面介绍的非常好,值得阅读. 这里盗用里面的两张图片 [在没有AOP之前是这样的] [使 ...
- Android studio多个项目之间怎么实现快速切换?
Android studio多个项目之间怎么实现快速切换?Android studio中打开的项目太多了,想切换到一个项目很麻烦,怎么才能快速切换到另一个项目中呢?请看下文详细介绍 在对Android ...
- 模式匹配KMP
字符串朴素模式匹配算法的2种实现: //1.朴素的模式匹配算法,用while实现 int StrStr_While(const char* pStr, const char* pSub, int* p ...
- UVA1366-----Martian Mining------DP
本文出自:http://blog.csdn.net/dr5459 题目地址: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&a ...
- 同步内核缓冲区 sync、fsync和fdatasync函数
同步内核缓冲区 1.缓冲区简单介绍 人生三大错觉之中的一个:在调用函数write()时,我们觉得该函数一旦返回,数据便已经写到了文件里.可是这样的概念仅仅是宏观上的.实际上.操作系统实现某些文件I/O ...
- 【笨木头Lua专栏】基础补充08:协同程序之resume-yield间的数据返回
这次要介绍几个事实上非常easy,可是一定要小心的返回值规则. 笨木头花心贡献,哈?花心?不,是用心~ 转载请注明.原文地址: http://www.benmutou.com/archives/173 ...
- 嵌入式:使用dd命令制作烧写文件
1. 使用dd命令制作烧写文件 环境: bootargs=mem=64M console=ttyAMA0,115200 root=/dev/mtdblock2 rootfstype=jffs2 mtd ...