365bet体育|www.635288com-365体育手机在线

热门关键词: 365bet体育,www.635288com,365体育手机在线

只能在两个窗口(iframe)之间交换数据

2019-11-21 作者:365bet体育   |   浏览(182)

HTML5 postMessage 跨域交流数据

前言

 

  在此之前大约讲明了采用script标签(jsonp卡塔 尔(英语:State of Qatar)以至iframe标签(window.name、location.hash卡塔尔国来跨域调换数据,昨日大家来学学一下HTML5的api,利用postMessage来跨域交流数据。和前面一些办法沟通数据方式各异的是,利用postMessage不可能和服务端交流数据,只能在多少个窗口(iframe卡塔 尔(英语:State of Qatar)之间交流数据,废话超级少说,我们直接步入实战。

 

实战postMessage

 

overview

  上文中说,postMessage是用于七个窗口(iframe卡塔 尔(英语:State of Qatar)之间沟通数据的,要是咱们同期开发着百度和谷歌(Google卡塔 尔(英语:State of Qatar)八个页面,是否说这两个之间就足以通讯了?No,no,no,事实其实不然,即使百度和Google俩页面有通讯的愿望也非凡。七个窗口能通讯的前提是,三个窗口以iframe的花样存在于另三个窗口,也许一个窗口是从另四个窗口通过window.open()或许超链接的款型张开的(相似能够用window.opener获取源窗口卡塔尔国;换句话说,你要换来数据,必需能获得目的窗口(target window)的引用,不然五个窗口之间并不是关系,想通讯也无从。

 

  既然是H5亲族的,大家也得观察下它被大面积浏览器的采用程度(具体细节check can I use postMessage卡塔 尔(阿拉伯语:قطر‎,能够见见选拔程度如故相当的高的:

 

 

 

  而postMessage的接收方法也一定不难:

 

otherWindow.postMessage(message, targetOrigin, [transfer]);

  otherWindow是对接纳方窗口的援引,经常能够是以下二种方式:

 

window.frames[0].postMessage

document.getElementsByTagName('iframe')[0].contentWindow

window.opener.postMessage

event.source.postMessage

window.open 再次回到的援用

...

  而message看名就可见意思正是发送的数据内容,扶持字符串、数字、json等大致具备方式的数目(详见The structured clone algorithm卡塔 尔(英语:State of Qatar)

 

  targetOrigin是选拔方的U奥迪Q5I(契约 主机 端口卡塔 尔(英语:State of Qatar),也得以是url格局,但之后的开始和结果(形如xx.html卡塔 尔(阿拉伯语:قطر‎会自行忽视;用通配符*能够钦赐全数域,然而切记不要用(for security卡塔 尔(英语:State of Qatar)。

 

  transfer可省略,没看懂是啥意思...现在有亟待的时候再商量

 

 

 

  而接纳方窗口日常监听message事件,详见下边包车型客车例子。

 

window <-> iframe

  假诺index页面有个iframe(分裂源卡塔 尔(阿拉伯语:قطر‎,大家要给iframe发送数据,而iframe获得数码后也发送数据给top window,表示“小编"获得数码了。直接看源码(构思什么发送and怎么样摄取卡塔尔:

 

复制代码

<!-- -->

<script type="text/javascript">

  // 页面加载完后工夫收获dom节点(iframe卡塔 尔(阿拉伯语:قطر‎

  window.onload = function(){

    // 向指标源发送数据

    document.getElementsByTagName('iframe')[0].contentWindow.postMessage({"age":10}, '');

  };

 

  // 监听有未有数量发送过来

  window.addEventListener('message', function(e) {

      console.log(e);

  });

</script>

<iframe src=";

复制代码

复制代码

<!-- -->

<script type="text/javascript">

  // 监听有未有数据发送过来

  window.addEventListener('message', function(e){

      // 判定数据发送方是或不是是可信的地点

      if(e.origin !== '')

        return;

    // 打字与印刷数据格式

    console.log(e);

    // 回发数据

    e.source.postMessage('hello world', e.origin);

  }, false);

</script>

复制代码

  大家截图看看打字与印刷的事物到底长什么样(index页面传给iframe的数码卡塔尔:

 

 

 

  红框标出的是三个最要害的个性,data从名称想到所包括的意义便是传输的数目了;origin正是出殡和安葬音讯窗口的源(U福特ExplorerI 合同 主机 端口卡塔尔国;而source就能够引用发送消息的窗口对象(能够用它来援引发送窗口举行新闻回传卡塔尔。

 

   在消息选用端监听可以监听message事件(代码如上卡塔尔,当然假诺要协作坑爹的ie明确要用attachEvent。这里不引入应用window.onmessage,包容性十分小好(例如不可能相配低版本ff卡塔尔。

 

window <-> window

  说罢了跟同大器晚成页面中的iframe的数据沟通,再来讲说八个窗口之间的数据沟通。大家精晓用window.open()能够张开三个新的窗口,而只要三个窗口同源,则五个窗口的通讯将会特别轻易,大家得以透过window.opener.functionName在新窗口中调用原本窗口的不二法门(和变量卡塔 尔(英语:State of Qatar)。不过纵然八个窗口差别源,那样的操作将会变得非常不方便,幸运的是H5给我们提供了postMessage,使得window.opener.postMessage()不会报错!demo超粗略:

 

 

<!-- http://localhost:81/fish/index.html -->
<script type="text/javascript">
  // 打开一个新的窗口
  var popup = window.open('http://localhost:8080/index.html');

  /// When the popup has fully loaded, if not blocked by a popup blocker:
  setTimeout(function() {
      // 当前窗口向目标源传数据
    popup.postMessage({"age":10}, 'http://localhost:8080');
  }, 1000);
</script>

 

 

 

 

<!-- http://localhost:8080/index.html -->
<script type="text/javascript"> 
  // 设置监听,如果有数据传过来,则打印
  window.addEventListener('message', function(e) {
    console.log(e);
    // console.log(e.source === window.opener);  // true
  });
</script>

 

  这里要安装二个计时器的原因是向指标窗口发送数据必需等对象窗口完全加载完,也正是说要在对象窗口中先安装好“监听器”,发送窗口发的多少才具被监听到,所以给了个电火花计时器delay,而因为加载时间的不鲜明所以停车计时器的delay值也不能够显明;此外二个有效的诀就算当对象页面加载完后,发个消息个源页面(postMessage卡塔 尔(英语:State of Qatar),而源页面收到新闻,再用postMessage发送新闻给指标页面。

 

康宁思念

 

  提到跨域交流数据,条件反射都会问一句,安全吧?对于postMessage,答案是断定的。

 

  postMessage接受的是“双向安全体制”。发送方发送数据的时候,会确认采纳方的源(所以最棒不用用*卡塔尔,而选拔方监听到message事件后,也足以用event.origin剖断是不是来自夏梅确可信的发送方。

postMessage 跨域交流数据 前言 早前大致讲授了采用script标签(jsonp卡塔尔以至iframe标签(window.name、location.hash卡塔 尔(英语:State of Qatar)来跨域沟通数据,前不久大家来...

本文由365bet体育发布于365bet体育,转载请注明出处:只能在两个窗口(iframe)之间交换数据

关键词: 365bet亚洲