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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A页面</title>
</head>

<body>
  <p>我是A页面</p>
  <button id="btn_open">打开B页面</button>
  <button id="btn_send">发送数据</button>
  <button id="btn_iframe">iframe</button>
  <iframe id="otherWin" src="./2-B.html" width="200px" height="100px" frameborder="0"></iframe>
  <script>
    // 1.获取按钮dom节点
    const btnOpen = document.querySelector('#btn_open');
    const btnSend = document.querySelector('#btn_send');
    const btnIframe = document.querySelector('#btn_iframe');
    let win;
    // 2.绑定事件
    btnOpen.onclick = function () {
      // 通过新窗口打开B页面
      win = window.open('./2-B.html');
    }

    // 将win重新赋值
    btnIframe.onclick = function () {
      win = document.querySelector('#otherWin').contentWindow
    }

    btnSend.onclick = function () {
      // 调用方法传递数据
      win.postMessage('hello B.html')
    }

    // btnOpen.addEventListener('click',function() {

    // }, false)
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>B页面</title>
  <style>
    body {
      height: 800px;
      background-color: cadetblue;
    }
  </style>
</head>

<body>
  <p>我是B页面</p>
  <script>
    window.onmessage = function (e) {
      console.log(e.data);
      console.log(e.origin);
    }
  </script>
</body>

</html>

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."); };

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webSocket</title>
  <script>
    // 1.创建链接
    const ws = new WebSocket('ws://47.94.46.113:7788/imserver/1')
    // 2.监听链接事件
    ws.addEventListener('open', openHandler);
    ws.addEventListener('close', closeHandler);
    ws.addEventListener('error', errorHandler);
    ws.addEventListener('message', messageHandler);

    function openHandler() {
      console.log('WebSocket open');
      // 向服务器端发送数据
      ws.send('hello Server');
    }

    function closeHandler() {
      console.log('WebSocket close');
    }

    function errorHandler() {
      console.log('WebSocket erroe');
    }

    function messageHandler(e) {
      // console.log('WebSocket message');
      console.log(e.data);
      console.log(e.origin);
    }
  </script>
</head>

<body>

</body>

</html>

[网络协议]h5--通信--跨文档消息传输、websocket

message-post.html?

message-receive.html

websocket

Websocket客户端