<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script src="/crosstagmsg.js"></script>
<body>
<div class="main">1</div>
<button onclick="handleEdit()">编辑</button>
<script>
function handleEdit() {
window.open('http://127.0.0.1:5500/update.html')
}
listenMsg((msg) => {
const div = document.querySelector('.main')
div.innerHTML = msg
})
</script>
</body>
</html>
const channer = new BroadcastChannel('eidt')
const sendMsg = (msg) => {
channer.postMessage(msg)
}
const listenMsg = (cb) => {
channer.addEventListener('message', function (e) {
cb && cb(e.data)
})
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script src="/crosstagmsg.js"></script>
<body>
<h3>编辑页面</h3>
<hr />
<input type="text" class="input" />
<button onclick="handleUpdate()">保存</button>
<script>
function handleUpdate() {
sendMsg(document.querySelector('.input').value)
alert('更新成功！')
}
</script>
</body>
</html>
