1. Summary
2. Same-origin strategy
3. webSocket (no cross-domain restrictions)
Advantages: No cross-domain restrictions
Disadvantages: High cost
4. Client Storage
1、localStorage + onStorage
example:
2. Timer + client storage
example:
shortcoming:
5. postMessage (no cross-domain restrictions)
Example:
index.html
<body>
<div>
<iframe src="./ifr.html" id="ifr" style="width:600px; height:300px"></iframe>
</div>
主窗口
<div>
<div>Message:</div>
<div id="messages"></div>
</div>
<script>
window.addEventListener("message", function (event) {
messages.innerHTML += `
<div>${
event.data}</div>
`
})
setInterval(() => {
ifr.contentWindow.postMessage(`message from index.html, ${
Date.now()}`)
}, 5000)
</script>
</body>
ifr.html
<body>
iframe窗口
<div>
<div>Message:</div>
<div id="messages"></div>
</div>
<script>
window.addEventListener("message", function (event) {
messages.innerHTML += `
<div>${
event.data}</div>
`
})
setInterval(()=> {
window.parent.postMessage(`message from ifr.html, ${
Date.now()}`)
}, 5000)
</script>
</body>
6. Broadcast Channel event broadcasting is super easy to use! ! !
- Allows different documents under different browser windows, tab pages, frames or iframes from the same origin to communicate with each other
- Disadvantages: Same-origin strategy
Core code:
example:
<body>
<section>
<iframe src="./page1.html"></iframe>
<iframe src="./page2.html"></iframe>
</section>
</body>
<body>
<h3>Page 1</h3>
<section style="margin-top:50px; text-align: center">
<input id="inputMessage" value="page 1的测试消息" />
<input type="button" value="发送消息" id="btnSend" />
<section id="messages">
<p>收到的消息:</p>
</section>
</section>
<script>
var messagesEle = document.getElementById("messages")
var messageEl = document.getElementById("inputMessage")
var btnSend = document.getElementById("btnSend")
var channel = new BroadcastChannel("channel-BroadcastChannel")
channel.addEventListener("message", function (ev) {
var msgEl = document.createElement("p")
msgEl.innerText =
ev.data.date + " " + ev.data.from + ":" + ev.data.message
messagesEle.appendChild(msgEl)
})
btnSend.addEventListener("click", function () {
var message = messageEl.value
channel.postMessage({
date: new Date().toLocaleString(),
message,
from: "page 1"
})
})
</script>
</body>
<body>
<h3>Page 2</h3>
<section style="margin-top:50px; text-align: center">
<input id="inputMessage" value="page 2的测试消息" />
<input type="button" value="发送消息" id="btnSend" />
<section id="messages">
<p>收到的消息:</p>
</section>
</section>
<script>
var messagesEle = document.getElementById("messages")
var messageEl = document.getElementById("inputMessage")
var btnSend = document.getElementById("btnSend")
var channel = new BroadcastChannel("channel-BroadcastChannel")
channel.addEventListener("message", function(ev) {
var msgEl = document.createElement("p")
msgEl.innerText = ev.data.date + " " + ev.data.from + ":" + ev.data.message
messagesEle.appendChild(msgEl)
})
btnSend.addEventListener("click", function() {
var message = messageEl.value
channel.postMessage({
date: new Date().toLocaleString(),
message,
from: "page 2"
})
})
</script>
</body>
Seven: MessageChannel (no cross-domain restrictions)
Channel Messaging
The APIMessageChannel
interface allows us to create a new message channel and send data through its two MessagePort properties- Disadvantages: Need to create a contact first
Core code:
example:
<body>
<iframe id="ifr" src="./ifr.html" style="width:600px; height:300px"></iframe>
<div>主窗口</div>
<div>
<div>Message:</div>
<div id="messages"></div>
</div>
<script>
const channel = new MessageChannel()
var ifr = document.querySelector('iframe')
ifr.onload = function () {
ifr.contentWindow.postMessage('__init__', '*', [channel.port2])
}
// 监听消息
channel.port1.onmessage = onMessage
function onMessage(e) {
messages.innerHTML += `
<div>${
event.data}</div>
`
}
// 轮询发送
setInterval(function(){
channel.port1.postMessage(`message from index.html, ${
Date.now()}`)
}, 5000)
</script>
</body>
<body>
iframe窗口
<div>
<div>Message:</div>
<div id="messages"></div>
</div>
<script>
window.addEventListener("message", function (event) {
if (event.data === "__init__") {
initChannel( event.ports[0])
}
})
function initChannel(port) {
port.onmessage = function (event) {
messages.innerHTML += `
<div>${
event.data}</div>
`
port.postMessage(`message from the iframe, ${
Date.now()}`);
}
}
</script>
</body>
8. SharedWorker
SharedWorker
YesWeb Worker
, a process can be started separately for communication with pages in the same domain.Web Worker
The child process can be started to execute JS, but the DOM cannot be manipulated.- Disadvantages: compatibility, same-origin policy
example: