h5--通信--跨文档消息传输、websocket

H5 提供了网页文档之间互相接收与发送消息的功能。当在 a 页面中通过 window.open 方法打开 b 页面，或者在 a 页面中通过 iframe 嵌套 b 页面，我们想让 a 中的数据传递到 b 中就可以 使用跨文档消息传输

A 页面的核心代码

window.onmessage = function(event){

event.data // 数据

event.origin // 源

}

B 页面的核心代码

otherWindow.postMessage(message,targetOrigin)

// otherWindow 为要发送窗口对象的引用 ， 可以通过 window.open 返回该对象 ， 或者通过获取 iframe 节点获取该对象

// message 为消息文本

// targetOrigin 为接受消息的对象窗口的 URL 地址

message-post.html 

message-receive.html

  
  
  
  



  
我是A页面
  打开B页面
  发送数据
  iframe
  
  

  
  
  
  
  



  
我是B页面
  

websocket

使用 websocket 可以在服务器与客户端之间建立一个非 HTTP 的双向连接，这个连接是实时的也是永久的，除非被显示关闭。服务器可以随时将消息推送到客户端。

Websocket客户端

要想实现websocket连接 ， 需要有服务器的支持 。

//1. 建立与服务器之间的长连接

var ws = new WebSocket(“ws://127.0.0.1:7788/imserver/1001");

//2. 连接成功后的回调函数

ws.onopen = function(evt) {

console.log("Connection open ...");

ws.send("Hello WebSockets!");

};

//3. 收到服务器消息的回调函数

ws.onmessage = function(evt) { console.log( "Received Message: " + evt.data); };

//4. 指定连接关闭后的回调函数

ws.onclose = function(evt) { console.log("Connection closed."); };