同じ原点内のウィンドウ、タブ、フレーム、iframeなどのブラウジングコンテキスト間でメッセージを送信するには、次のコマンドを使用できます 放送チャンネルAPI。この記事では、メッセージを送受信するためにそれを使用する方法を見ていきます。APIを使用するには、基礎となるチャネルをリッスンしているBroadcastChannelオブジェクトを作成する必要があります。
その後、投稿されたメッセージを受け取ることができます。 通信したいiframeやワーカーへの参照を維持する必要はありません。同じオリジン内のものは、BroadcasChannel
const bc = new BroadcastChannel("test_channel");
bc.postMessage("test");
bc.onmessage = ev => {
console.log(ev.data);
};
bc.close();
インスタンスを作成し、postMessageonmessageプロパティを設定して送信されたメッセージをリッスンします。
データには、datacloseを呼び出して、完了したらチャンネルを閉じることができます。
文字列だけでなく、あらゆる種類のオブジェクトを送信できます。P>
メッセージイベント
evonmessageMessageEventオブジェクトです。
アクセスできる読み取り専用プロパティがいくつかあります。
datapostMessageorigin—発行されたメッセージの発信元を表す文字列lastEventId—イベントの一意のIDを表す文字列source—aMessageEventSourceWindowProxyMessagePortServiceWorkerオブジェクト）、メッセージエミッタを表すportsオブジェクトportsオブジェクトdiv>—の配列MessagePortオブジェクトを表す メッセージが送信されているチャネルに関連付けられているポート。
エラーの処理
メッセージの送信時のエラーを処理するには、イベントハンドラをBroadcast Channelオブジェクトのonmessageerrorプロパティに設定たとえば、次のように書くことができます。
bc.onmessageerror = e => console.log(e);
次に、発生したエラーをログに記録できます。div>
name
nameプロパティでチャネルの名前を取得できます。これを行うには、次のように書くことができます。
const bc = new BroadcastChannel("test_channel");
console.log(bc.name);
次に、放送チャンネルの名前がtest_channelconsole.logtest_channelconsole.log。
結論
Broadcast Channel APIは、コンテキスト間通信を行うことができる非常に単純なAPIです。
ユーザーがアカウントにログインしたときのように、同じサイトのオリジン環境内の他のタブでユーザーアクションを検出するために使用できます。
メッセージングプロトコルはなく、さまざまなコンテキストの異なる文書がそれ自体を実装する必要があります。また、ネゴシエーションもなく、仕様では必要ありません。
