跨域的由来

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 跨域的更多相关文章

  1. JS window.name跨域封装

    JS window.name 跨域封装 function CrossDomainName(target, agent, callback, security) { if (typeof target ...

  2. window.name跨域

    window.name? 每一个页面都有一个自己的window,而window.name是window的名字. window.name跨域原理 window对象有个name属性,该属性有个特征:即在一 ...

  3. window.returnValue跨域传值问题[转]

    主页面用window.showModalDialog的时候,如果直接打开其它系统的页面,这时候别人的页面在window.returnValue=1;这样返回值的时候,主页面是取不到返回值的,原因就是因 ...

  4. HTML5 window/iframe跨域传递消息 API

    原文地址:HTML5′s window.postMessage API 在线示例:Using HTML5's window.postMessage(请打开控制台看日志) 原文日期: 2010年09月0 ...

  5. (二)文档请求不同源之window.name跨域

    一.基本原理 window.name不是一个普通的全局变量,而是当前窗口的名字.这里要注意的是每个iframe都有包裹它的window,而这个window 是top window的子窗口,而它自然也有 ...

  6. (二)文档请求不同源之window.postMessage跨域

    一.基本原理 HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging).这个API为window对象新增了一个window.postMessage方法,允许跨 ...

  7. window.name跨域实现

    参考:window.name实现的跨域数据传输 有三个页面: a.com/app.html:应用页面. a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面 ...

  8. window.name 跨域数据传输

    通过window.name可以实现跨域数据传输. 要解决的功能:  www.a.com/a.html 需要获取到 www.b.com/b.html页面内容的数据 需要3个页面 www.a.com/a. ...

  9. HTML5之worker开启JS多线程模式及window.postMessage跨域

    worker概述 worker基本使用 window下的postMessage worker多线程的应用 一.worker概述 web worker实际上是开启js异步执行的一种方式.在html5之前 ...

随机推荐

  1. JAE京东云引擎Git上传管理代码教程和京东云数据库导入导出管理

    文章目录 Git管理准备工作 Git工具上传代码 发布代码装程序 mywebsql管理 京东云引擎小结   JAE京东云引擎是京东推出的支持Java.Ruby.Python.PHP.Node.js多语 ...

  2. Python 連接 MySQL

    Python 連接 MySQL MySQL 是十分流行的開源資料庫系統,很多網站也是使用 MySQL 作為後台資料儲存,而 Python 要連接 MySQL 可以使用 MySQL 模組.MySQLdb ...

  3. Android 自定义view实现水波纹效果

    http://blog.csdn.net/tianjian4592/article/details/44222565 在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了 ...

  4. ASP.NET路由

    ASP.NET 路由使您可以使用不必映射到网站中特定文件的 URL. 由于该 URL 不必映射到文件,因此可以使用对用户操作进行描述因而更易于被用户理解的 URL. ASP.NET MVC 框架和 A ...

  5. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  6. HDU Good Numbers (热身赛2)

    转载请注明出处:http://blog.csdn.net/a1dark 分析:一道水题.找下规律就OK了.不过要注意特判一下0.因为0也是good number.这个把我坑惨了= =||| #incl ...

  7. datanode启动后,在web50070port发现不到datanode节点(能力工场)

    直接上问题:这两天为了试验,安装了两套集群: (1)32位hadoop1集群(5个节点); (2)64位hadoop2集群(6个节点) 两个集群中都遇到过这种问题:在namenode正常启动hadoo ...

  8. Storm 配置图文解析

    Storm 配置图文解析 參考阅读:http://www.xiaofateng.com/? p=959 ============================== | sample-topology ...

  9. [转]mysql慢查询日志

    原文链接:http://www.cnblogs.com/zhangjing0502/archive/2012/07/30/2615570.html 参考博文:http://blog.chinaunix ...

  10. 通过xml生成word文档

    Xml生成word总结 使用xml生成word的基本步骤在<使用xslt转化xml数据形成word文档导出.doc>中说明比较清楚了.但是其中的细节并未说到,因此自己折腾了两天总算成功了. ...