h5--通信--跨⽂档消息传输、websocket
H5提供了⽹页⽂档之间互相接收与发送消息的功能。当在a页⾯中通过window.open⽅法打开b页⾯，或者在a页⾯中通过iframe嵌套b页⾯，我们想让a中的数据传递到b中就可以使⽤跨⽂档消息传输
A页⾯的核⼼代码
event.data // 数据
}
B页⾯的核⼼代码
otherWindow.postMessage(message,targetOrigin)
// otherWindow为要发送窗⼝对象的引⽤，可以通过window.open返回该对象，或者通过获取iframe节点获取该对象// message为消息⽂本
// targetOrigin为接受消息的对象窗⼝的URL地址
message-post.html
message-receive.html
<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.绑定事件
// 通过新窗⼝打开B页⾯
win = window.open('./2-B.html');
}
// 将win重新赋值
win = document.querySelector('#otherWin').contentWindow
}
// 调⽤⽅法传递数据
win.postMessage('hello B.html')
}
// btnOpen.addEventListener('click',function() {
// }, false)
</script>
</body>
</html>
<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>
iframe嵌套页面加载慢
<p>我是B页⾯</p>
<script>
console.log(e.data);
console.igin);
}
</script>
</body>
</html>
websocket
使⽤websocket可以在服务器与客户端之间建⽴⼀个⾮HTTP的双向连接，这个连接是实时的也是永久的，除⾮被显⽰关闭。服务器可以随时将消息推送到客户端。
Websocket客户端
要想实现websocket连接，需要有服务器的⽀持。
//1. 建⽴与服务器之间的长连接
var ws = new WebSocket(“ws://127.0.0.1:7788/imserver/1001");
//2. 连接成功后的回调函数
console.log("Connection open ...");
ws.send("Hello WebSockets!");
};
//3.收到服务器消息的回调函数
/
/4.指定连接关闭后的回调函数
<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.igin);
}
</script>
</head>
<body>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。