HTML5中应用postMessage完成两个网页页面间传送数据

2021-02-24 07:00 jianzhan

估算非常少人了解HTML5 APIS里有1个window.postMessage API。window.postMessage的作用是容许程序流程员跨域在两个对话框/frames间推送数据信息信息内容。基础上,它就好像跨域的AJAX,但并不是访问器跟服务器之间互动,而是在两个顾客端之间通讯。让大家看来1下window.postMessage是怎样工作中的。除IE6、IE7以外的全部访问器都适用这个作用。

数据信息推送端

最先大家要做的是建立通讯进行端,也便是数据信息源”source”。做为进行端,大家能够open1个新对话框,或建立1个iframe,往新对话框里推送数据信息,简易起见,大家每6秒钟推送1次,随后建立信息监视器,从总体目标对话框监视它意见反馈的信息内容。

JavaScript Code拷贝內容到剪贴板
  1. //弹出1个新对话框   
  2. var domain = 'http://scriptandstyle.com';   
  3. var myPopup = window.open(domain    
  4.             + '/windowPostMessageListener.html','myWindow');   
  5.   
  6. //周期性的推送信息   
  7. setInterval(function(){   
  8.  var message = 'Hello!  The time is: ' + (new Date().getTime());   
  9.  console.log('blog.local:  sending message:  ' + message);   
  10.         //send the message and target URI   
  11.  myPopup.postMessage(message,domain);   
  12. },6000);   
  13.   
  14. //监视信息意见反馈   
  15. window.addEventListener('message',function(event) {   
  16.  if(event.origin !== 'http://scriptandstyle.com'return;   
  17.  console.log('received response:  ',event.data);   
  18. },false);   
  19.   

这里我应用了window.addEventListener,但在IE里这样是不好的,由于IE应用window.attachEvent。假如你不想分辨访问器的种类,可使用1些专用工具库,例如jQuery或Dojo。

假定你的对话框一切正常的弹出来了,大家推送1条信息——必须特定URI(必要的话必须特定协议书、主机、端口号号等),信息接受方务必在这个特定的URI上。假如总体目标对话框被更换了,信息将不容易传出。

大家另外建立了1个恶性事件监视器来接受意见反馈信息内容。有1点极为关键,你1定要认证信息的来源于的URI!仅有在总体目标方合理合法的状况才你才可以解决它发来的信息。

假如是应用iframe,编码应当这样写:

JavaScript Code拷贝內容到剪贴板
  1. //捕捉iframe   
  2. var domain = 'http://scriptandstyle.com';   
  3. var iframe = document.getElementById('myIFrame').contentWindow;   
  4.   
  5. //推送信息   
  6. setInterval(function(){   
  7.  var message = 'Hello!  The time is: ' + (new Date().getTime());   
  8.  console.log('blog.local:  sending message:  ' + message);   
  9.         //send the message and target URI   
  10.  iframe.postMessage(message,domain);    
  11. },6000);   
  12.   

保证你应用的是iframe的contentWindow特性,而并不是连接点目标。

数据信息接受端

下面大家要开发设计的是数据信息接受端网页页面。接受方对话框里有1个恶性事件监视器,监视“message”恶性事件,1样,你也必须认证信息来源于方的详细地址。信息能够来自任何详细地址,要保证解决的信息是来自1个可靠的详细地址。

JavaScript Code拷贝內容到剪贴板
  1. //回应恶性事件   
  2. window.addEventListener('message',function(event) {   
  3.  if(event.origin !== 'http://davidwalsh.name'return;   
  4.  console.log('message received:  ' + event.data,event);   
  5.  event.source.postMessage('holla back youngin!',event.origin);   
  6. },false);   
  7.   

上面的编码片断是往信息源意见反馈信息内容,确定信息早已收到。下面是几个较为关键的恶性事件特性:

source – 信息源,信息的推送对话框/iframe。
origin – 信息源的URI(将会包括协议书、网站域名和端口号),用来认证数据信息源。
data – 推送方推送给接受方的数据信息。

这3个特性是信息传送中务必用到的数据信息。

应用window.postMessage

跟别的很web技术性1样,假如你不校检数据信息源的合理合法性,那应用这类技术性可能变得很风险;你的运用的安全性必须你对它负责。window.postMessage就好像PHP相对JavaScript技术性。window.postMessage很酷,并不是吗?

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。