JavaScript完成的双向跨域插件共享,javascript跨域插件

JavaScript完结的双向跨域插件分享,javascript跨域插件

由于浏览器(同源战略)限制,JavaScript
跨域的难题,一贯是三个极为困难的主题材料。HTML5
提供了跨文书档案音信传输的机能,在网页文书档案之间相互摄取与发送音信。使用那么些功能,不独有同源(域

  • 端口号)的 Web
    网页之间能够相互通讯,还是能够在七个例外域名之间落成跨域通讯。

跨文书档案音信传输Cross Document
Messaging提供了postMessage方法在不一致网页文书档案之间互相传递数据,扶助实时音信传递。未来众多浏览器都将支撑这一个功用,举个例子谷歌(Google)Chrome 2.0+、Internet Explorer 8.0+、Firefox 3.0+、Opera 9.6+、Safari
4.0+等

那么,IE6、IE7等不支持 HTML5的浏览器如何是好?

可以动用window.name方法,因为window.name的改变不关乎跨域难点,纵然使用起来不是特意理想,但作用还足以承受。
不过,大家总不能每趟涉及到跨域都去写二回window.postMessage、window.addEventListener、window.name等等那一个内容吧。

为此,笔者把这一体跨域进度抽象出来,封装成四个JavaScript
插件,消除双向跨域难点,落成不一样网页文档之间的实时通讯,能够在七个分歧域名之间达成跨域通讯。

demo下载地址:

javascript跨域插件jcrossdomain.js

复制代码 代码如下:

(function (win){
  /**
   * 未有开放的树
   * 2013/12/07 17:12
   */
  var _jcd = {
    isInited : false,
    elmt : false,
    hash : ”,
    delims : ‘,’,
    rand : function(){
      return (new Date).getTime()
    },
    msg : function(){
      alert(‘Warning: You must call init function at first’);
    },
    init : function(callback, elmt){
      if(_jcd.isInited == true)
        return;
      _jcd.isInited = true;
      _jcd.elmt = elmt;
      if(win.postMessage){
        //浏览器接济 HTML5 postMessage 方法
        if(win.addEventListener){
          //扶助火狐、Google等浏览器
          win.addEventListener(“message”, function(ev){
            callback.call(win, ev.data);
          },false);
        }else if(win.attachEvent){
          //支持IE浏览器
          win.attachEvent(“onmessage”, function(ev){
            callback.call(win, ev.data);
          });
        }
        _jcd.msg = function(data){
          _jcd.elmt.postMessage(data, ‘*’);
        }
      }else{
        //浏览器不支持 HTML5 postMessage 方法,如IE6、7
        setInterval(function(){
          if (win.name !== _jcd.hash) {
            _jcd.hash = win.name;
            callback.call(win, _jcd.hash.split(_jcd.delims)[1]);
          }
        }, 50);
        _jcd.msg = function(data){
          _jcd.elmt.name = _jcd.rand() + _jcd.delims + data;
        }
      }
    }
  };

  var jcd = {

    initParent : function(callback, iframeId){
      _jcd.init(callback,
document.getElementById(iframeId).contentWindow);
    },

    initChild : function(callback){
      _jcd.init(callback, win.parent);
    },

    sendMessage : function(data){
      _jcd.msg(data);
    }

  };
  win.jCrossDomain = jcd;
})(window);

父网页中调用方法:

复制代码 代码如下:

//自定义回调函数
var cb = function(msg){
  alert(“get msg:” + msg);
};

//初步化,载入回调函数和 iframe 的id
jCrossDomain.initParent(cb, ‘iframeA’);

//发消息
jCrossDomain.sendMessage(‘hello, child’);

子网页中调用方法:

复制代码 代码如下:

//自定义回调函数
var cb = function(msg){
  alert(“get msg:” + msg);
};

//早先化,载入回调函数
jCrossDomain.initChild(cb);

//发消息
jCrossDomain.sendMessage(‘hello, parent’);

依傍测量检验小提醒:
为了兑现差异域之间的通讯,能够在操作系统的 hosts
文件加多七个域名,举行效仿。

hosts 文件中加多五个例外的域名
127.0.0.1  parent.com
127.0.0.1  child.com

技士的上扬历程:

澳门新萄京8522 1

由于浏览器(同源计策)限制,JavaScript
跨域的难点,一直是七个极为困难的主题材料。H…

  • 端口号)的 Web
    网页之间能够相互通讯,还是能够在八个例外域名之间达成跨域通讯。

比如,有个a.html页面,它里面包车型地铁代码须要运用ajax获取三个不相同域上的json数据,假设这么些json数据地址是

基于这些思虑,大家得以在有些页面设置好 window.name
的值,然后跳转到另外二个页面。在那个页面中就足以获得到大家恰好安装的
window.name 了。

复制代码 代码如下:

(“UCRUISERL的首部”指window.location.protocol
+window.location.host,也足以知道为“Domains, protocols and ports must
match”。)

在页面 中设置

  };
  win.jCrossDomain = jcd;
})(window);

setTimeout(function(){

 

    initParent : function(callback, iframeId){
      _jcd.init(callback,
document.getElementById(iframeId).contentWindow);
    },

   }

A页面通过postMessage方法发送新闻:

父网页中调用方法:

var source = event.source;//源Window对象

代码与事先的区分就在于相对路线换到了其余域的相对路线,也等于您要跨域访谈的接口地址。

那正是说,IE6、IE7等不补助 HTML5的浏览器怎么做?

iframe.onload = function(){

var ifrproxy = document.createElement(‘iframe’);

出于浏览器(同源战术)限制,JavaScript
跨域的标题,一贯是三个极为困难的难点。HTML5
提供了跨文书档案音讯传输的功效,在网页文书档案之间交互吸取与发送音讯。使用那个成效,不仅仅同源(域

   function test(){

CO科雷傲S(Cross-Origin Resource
Sharing)跨域能源共享,定义了总得在看望跨域能源时,浏览器与服务器应该什么联系。COTiguanS背后的主旨情维就是使用自定义的HTTP底部让浏览器与服务器进行交流,进而调整伏乞或响应是应当成功依然退步。近日,全部浏览器都协助该意义,IE浏览器无法低于IE10。整个CO福睿斯S通讯进程,都以浏览器自动实现,没有要求客商到场。对于开采者来讲,COOdysseyS通讯与同源的AJAX通讯没有区别,代码完全一致。浏览器一旦开掘AJAX诉求跨源,就能自动抬高级中学一年级些叠合的头音信,临时还大概会多出二回附加的伏乞,但客户不会有痛感。

效仿测量检验小提醒:
为了落到实处分裂域之间的通讯,可以在操作系统的 hosts
文件增添五个域名,实行效仿。

   document.domain = ‘damonare.cn’;//设置成主域

例如说,有个a.html页面,它个中的代码供给利用ajax获取多少个分歧域上的json数据,即便那个json数据地址是

hosts 文件中加多多少个例外的域名
127.0.0.1  parent.com
127.0.0.1  child.com

window对象有个name属性,该属性有个特点:即在一个窗口(window)的生命周期内,窗口载入的具有的页面都是分享三个window.name的,各样页面临window.name都有读写的权能,window.name是长久存在三个窗口载入过的富有页面中的,并不会因新页面包车型客车载入而开展重新载入参数。

var data = ”;

demo下载地址:,版本v2

xhr.open(“POST”, “/damonare”,true);

在页面 中也设置document.domain:

//自定义回调函数
var cb = function(msg){
  alert(“get msg:” + msg);
};

?>

} catch (e) {

子网页中调用方法:

澳门新萄京8522,       var win =
document.contentWindow;//能够赢获得iframe里的window对象,但该window对象的属性和方法大致是不可用的

  1. 因此HTML5的postMessage方法跨域

(function (win){
  /**
   * 没有开放的树
   * 2013/12/07 17:12
   */
  var _jcd = {
    isInited : false,
    elmt : false,
    hash : ”,
    delims : ‘,’,
    rand : function(){
      return (new Date).getTime()
    },
    msg : function(){
      alert(‘Warning: You must call init function at first’);
    },
    init : function(callback, elmt){
      if(_jcd.isInited == true)
        return;
      _jcd.isInited = true;
      _jcd.elmt = elmt;
      if(win.postMessage){
        //浏览器协理 HTML5 postMessage 方法
        if(win.addEventListener){
          //扶助火狐、谷歌(Google)等浏览器
          win.addEventListener(“message”, function(ev){
            callback.call(win, ev.data);
          },false);
        }else if(win.attachEvent){
          //支持IE浏览器
          win.attachEvent(“onmessage”, function(ev){
            callback.call(win, ev.data);
          });
        }
        _jcd.msg = function(data){
          _jcd.elmt.postMessage(data, ‘*’);
        }
      }else{
        //浏览器不援救 HTML5 postMessage 方法,如IE6、7
        setInterval(function(){
          if (win.name !== _jcd.hash) {
            _jcd.hash = win.name;
            callback.call(win, _jcd.hash.split(_jcd.delims)[1]);
          }
        }, 50);
        _jcd.msg = function(data){
          _jcd.elmt.name = _jcd.rand() + _jcd.delims + data;
        }
      }
    }
  };

parent.parent.location.hash = self.location.hash.substring(1);

ifr.contentWindow.postMessage(‘hello world!’, targetOrigin);

跨文档消息传输Cross Document
Messaging提供了postMessage方法在不一致网页文书档案之间交互传递数据,支持实时新闻传递。以后众多浏览器都将扶助这几个意义,举例GoogleChrome 2.0+、Internet Explorer 8.0+、Firefox 3.0+、Opera 9.6+、Safari
4.0+等

基于这一个思索,大家能够在有个别页面设置好 window.name
的值,然后跳转到别的七个页面。在这些页面中就足以拿走到大家正好安装的
window.name 了。

//管理获得的json数据

复制代码 代码如下:

iframe.onload = function() {

JSONP首要被老的浏览器帮助,它们往往不扶助CO传祺S,而相当多今世浏览器都曾经支撑了COWranglerS)。

//起先化,载入回调函数
jCrossDomain.initChild(cb);

跨域一词从字面意思看,就是跨域名嘛,但实质上跨域的限量相对不仅那么狭小。具体概念如下:只要左券、域名、端口有其余八个分裂,都被作为是区别的域。之所以会发出跨域那个标题吗,其实也很轻便想领会,即使随意援引外部文件,不一样标签下的页面援用类似的相互的文书,浏览器很轻易懵逼的,安全也得不到有限帮忙了就。什么事,都以平安第一嘛。但在武威限制的还要也给注入iframe或是ajax应用上带来了广灾荒为。所以大家要透过有些办法使本域的js能够操作其他域的页面临象大概使其余域的js能操作本域的页面临象(iframe之间)。上边是实际的跨域处境详解:

b.html监听到url发生变化,触发相应操作

//初阶化,载入回调函数和 iframe 的id
jCrossDomain.initParent(cb, ‘iframeA’);

otherWindow.postMessage(message, targetOrigin);

var xhr = new XMLHttpRequest();

//自定义回调函数
var cb = function(msg){
  alert(“get msg:” + msg);
};

       var iframe = document.getElementById(‘ifame’);

jquery会自动生成一个大局函数来替换callback=?中的问号,之后获得到数码后又会活动销毁,实际上便是起四个不经常代理函数的功力。$.getJSON方法会自动判别是或不是跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的花样来调用jsonp的回调函数。

//发消息
jCrossDomain.sendMessage(‘hello, child’);

// ie、chrome的安全机制不也许修改parent.location.hash,

跨域一词从字面意思看,正是跨域名嘛,但实则跨域的限量相对不仅那么狭小。具体概念如下:只要公约、域名、端口有任何多少个不如,都被看成是见仁见智的域。之所以会时有产生跨域那几个难点呢,其实也很轻巧想知道,倘使随意援引外界文件,分歧标签下的页面援用类似的互相的文件,浏览器很轻易懵逼的,安全也得不到保险了就。什么事,都以平安第一呗。但在平安范围的还要也给注入iframe或是ajax应用上带来了众多劳神。所以大家要经过一些办法使本域的js能够操作别的域的页面前遭逢象可能使其余域的js能操作本域的页面前遭受象(iframe之间)。下边是现实的跨域情状详解:

复制代码 代码如下:

ifrproxy.style.display = ‘none’;

你大概感兴趣的稿子:

  • AJAX
    javascript的跨域访问试行
  • javascript使用window.name解决跨域难点
  • Javascript
    跨域访谈施工方案
  • javascript跨域刷新完毕代码
  • Javascript跨域央浼的4种缓慢解决办法
  • 采纳JavaScript
    完成各个跨域的秘诀
  • javascript跨域的4种艺术和公理详解
  • JavaScript使用HTML5的window.postMessage完结跨域通讯例子
  • JavaScript三种跨域本事完善介绍
  • 有关JavaScript跨域难点及实时刷新建设方案
  • JavaScript中跨域调用Flash的措施
  • JavaScript跨域方法汇总
  • javascript跨域原因以及缓慢解决方案分享

window.onload = function() {

console.log(data);//hello world!

javascript跨域插件jcrossdomain.js

修改document.domain的主意只适用于区别子域的框架间的交互。

var data = ”;

  var jcd = {

//处理获得的json数据

var xhr = new XMLHttpRequest();

为此,小编把那总体跨域进度抽象出来,封装成贰个JavaScript
插件,化解双向跨域难点,完结差异网页文书档案之间的实时通讯,能够在五个差别域名之间完毕跨域通讯。

b.html页面包车型地铁重要性代码如下:

这里大家须要静心两点:

//发消息
jCrossDomain.sendMessage(‘hello, parent’);

COENVISIONS(Cross-Origin Resource
Sharing)跨域财富分享,定义了亟须在拜望跨域财富时,浏览器与服务器应该如何联系。CO昂科威S背后的中坚观念就是应用自定义的HTTP底部让浏览器与服务器实行沟通,进而调控须要或响应是相应成功依然退步。近来,全体浏览器都援助该意义,IE浏览器不能够低于IE10。整个CO奥迪Q5S通讯进度,都以浏览器自动完结,不须求客商加入。对于开辟者来讲,CORubiconS通讯与同源的AJAX通讯未有差距,代码完全等同。浏览器一旦开采AJAX乞请跨源,就能活动抬高级中学一年级些叠加的头音讯,不时还有大概会多出一遍附加的伏乞,但顾客不会有认为。

尖端浏览器Internet Explorer 8+, chrome,Firefox , Opera 和 Safari
都将接济那几个意义。这几个作用首要饱含接受音信的”message”事件和出殡和埋葬消息的”postMessage”方法。比方damonare.cn域的A页面通过iframe嵌入了二个google.com域的B页面,能够通过以下办法落成A和B的通讯

能够应用window.name方法,因为window.name的修改不涉及跨域难题,固然接纳起来不是特意卓越,但效果还能接受。
不过,大家总不能够每一遍涉及到跨域都去写三次window.postMessage、window.add伊夫ntListener、window.name等等那一个剧情呢。

  1. 通过location.hash跨域
  1. 通过document.domain跨域

    initChild : function(callback){
      _jcd.init(callback, win.parent);
    },

A页面通过postMessage方法发送新闻:

document.body.appendChild(ifrproxy);

澳门新萄京8522 2

5.通过jsonp跨域

var origin = event.origin;//音讯来源地址

    sendMessage : function(data){
      _jcd.msg(data);
    }

}

程序猿的提升进度:

var xhr = new XMLHttpRequest();

b.html页面的首要代码如下:

ifr.contentWindow.postMessage(‘hello world!’, targetOrigin);

    document.domain =
‘damonare.cn’;//在iframe载入那几个页面也安装document.domain,使之与主页面的document.domain一样

  1. 经过HTML5的postMessage方法跨域

小编们看来获取数据的地址前边还可能有叁个callback参数,按老规矩是用这么些参数名,然而你用别的的也长期以来。当然假若获取数据的jsonp地址页面不是你协和能说了算的,就得遵守提供数据的那一方的规定格式来操作了。

        区别域名                  差别意

otherWindow:指目的窗口,也正是给哪些window发信息,是 window.frames
属性的成员要么由 window.open 方法制造的窗口

a.html下修改iframe的src为google.com/b.html#paco

b.html下创办一个逃匿的iframe,此iframe的src是baidu.com域下的,并挂上要传送的hash数据,如src=”

var data = event.data;//消息

    }

b.html监听到url发生变化,触发相应操作

JSONP只可以促成GET需要,而COLX570S扶助全部项指标HTTP央浼。

};

    }

ifrproxy.src = “”;

window.attachEvent(‘onmessage’, onmessage);

因为是当做叁个js文件来引入的,所以):

$.getJSON(‘

a.html监听到url发生变化,触发相应操作

} else if (typeof window.attachEvent != ‘undefined’) {

  1. 通过document.domain跨域

proxy.html页面包车型大巴最首要代码如下 :

var onmessage = function (event) {

var ifr = document.getElementById(‘ifr’);

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图