跨域的由来

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. java多线程制作计时器

    基本思路: 在类中创建thread 供按钮监听器调用. 界面设计:

  2. 国际名品SYSTEM入驻北京金融街购物中心__购物败家_YOKA时尚网

    国际名品SYSTEM入驻北京金融街购物中心__购物败家_YOKA时尚网 国际名品SYSTEM入驻北京金融街购物中心

  3. Objective-C基础教程读书笔记(7)

    第7章 深入了解Xcode Xcode是一个很好用的工具,有很多强大的功能,不过并不是所有的功能都易于发现.如果你打算长期使用这个强大的工具,就肯定要尽可能多了解它.本章将介绍一些Xcode编辑器的使 ...

  4. uva-11995 - I Can Guess the Data Structure!(栈,优先队列,队列,水题)

    11995 - I Can Guess the Data Structure! There is a bag-like data structure, supporting two operation ...

  5. 怎么在Ubuntu Scope中获取location地址信息

    Location信息对非常多有地址进行搜索的应用来说非常重要.比方对dianping这种应用来说.我们能够通过地址来获取当前位置的一些信息.在这篇文章中,我们来介绍怎样获取Scope架构中的位置信息. ...

  6. Android创建启动画面

    每一个Android应用启动之后都会出现一个Splash启动界面,显示产品的LOGO.公司的LOGO或者开发人员信息.假设应用程序启动时间比較长,那么启动界面就是一个非常好的东西,能够让用户耐心等待这 ...

  7. 浅析C++基础知识

    近期想对C++的面试题目进行一下更加详细的整理.事实上认真思考一下C++程序猿的面试,我们能够发现对程序猿的能力的考察总是万变不离当中,这些基础知识主要分为五部分:一. C/C++基础知识 二. C/ ...

  8. ssh "openssh-daemon is stopped"操作之伤+sftp访问“-bash: /dev/null: Permission denied”

    1.ssh "openssh-daemon is stopped"操作之伤 原来好好的 sshd服务突然发现  不能重新启动了: [root@bogon rules.d]# ser ...

  9. 进入MFC讲坛的前言(五)

    框窗.视图和文档及其关系 MFC架构的另外一个特色是它的框窗.视图和文档这个三位一体的结构,它是一个典型的MVC(Model.View and Controler)结构.严格的讲,框窗不属于MVC中的 ...

  10. java邮件小实例

    新建一个包,名为mail 第一个类:MailSenderInfo.java  ########################################### package com.util. ...