1. 概要
2. 同一起源戦略
3. webSocket (クロスドメイン制限なし)
長所: クロスドメインの制限がない
短所: 高コスト
4. クライアントストレージ
1、localStorage + onStorage
例：
2. タイマー + クライアントストレージ
例：
欠点:
5. postMessage (クロスドメイン制限なし)
例:
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. ブロードキャストチャンネルのイベントブロードキャストは超簡単！！！
- 異なるブラウザ ウィンドウ、タブ ページ、同じオリジンのフレームまたは iframe の下にある異なるドキュメントが相互に通信できるようにします。
- 短所: 同一オリジン戦略
コアコード:
例：
<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>
7: MessageChannel (クロスドメイン制限なし)
Channel MessagingAPIMessageChannelインターフェイスを使用すると、新しいメッセージ チャネルを作成し、その 2 つの MessagePort プロパティを通じてデータを送信できます。- 欠点: 最初に連絡先を作成する必要がある
コアコード:
例：
<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はいWeb Worker、同じドメイン内のページとの通信のためにプロセスを個別に開始できます。Web Worker子プロセスを開始して JS を実行することはできますが、DOM を操作することはできません。- 短所: 互換性、同一オリジンポリシー
例：
