• 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新建下面的方法

     1 var crossDomainId = 0; //作为每次不同使用crosspost的标识
     2   /*param包含 
     3     @param.action  请求action
     4     @param.param   请求数据
     5     @param.redirUrl  iframe重定向的链接
     6   */
     7   function crosspost (param,cb) {
     8       var g = $('<iframe id='+iframe.crossDomainId+' ></iframe>').appendTo('body').attr('src', 'http://cheat.xxx.com');
     9       var _param = json.JSON.stringify($.extend(true, param, {id:'cb'+crossDomainId}));
    10 
    11       g[0].contentWindow.name = _param;
    12       window.redirectCallback['cb'+crossDomainId] = function  () {
    13           cb&&cb(window.name[data]);
    14           g.remove();
    15       }
    16       crossDomainId++;
    17   }

    cheat.xxx.com/crossproxy.html代码

     1   try{
     2   var data=JSON.parse(window.name),id=data.id,redirUrl=data.redirUrl;
     3   $.post(data.action,data.param,'json').done(function(data){
     4     window.name=JSON.stringify($.extend(true, {data:data}, {id:id})); 5     location.href=redirUrl; 6   }).fail(function(){
     7     window.name=data;
     8     location.href=redirUrl
     9   });
    10   }catch(e){}

    article.xxx.com/redirect.html代码

    1 var data=JSON.parse(window.name);
    2 var id = data[id];
    3   try{
    4     top.redirectCallback(param.id);
    5   }catch(e){
    6 
    7   }

    优化:

    以上代码在crossDomainId和url参数,可以使用location.search在父页面和iframe间传输,可降低window.name的复杂度

    原页面使用defferd的写法,在使用的时候能够更加优雅

    跨域的方法有很多,之前写过一篇jsonp跨域的文章http://www.cnblogs.com/peace1/p/4517279.html,写的比较简单

  • 相关阅读:
    网络相关知识点:nginx相关概念
    Nginx初体验(一):nginx介绍
    Mybatis常见面试题(转)
    Mybatis 的常见面试题
    springmvc和mybatis面试题(含答案)
    SpringMVC总结以及在面试中的一些问题.
    Spring69道面试题
    Spring面试题
    java基础面试题
    2018年Java面试题整理
  • 原文地址:https://www.cnblogs.com/peace1/p/5392819.html
Copyright © 2020-2023  润新知