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
![](https://i-blog.csdnimg.cn/blog_migrate/2c8e6f497f5c46d3e5f6fe3ab2b26808.png)
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>