postMessageを使用したいくつかの方法：

2年 ago
優斗, 朝陽
1 minute

postMessage関数は異なるウィンドウ間で通信するメソッドで、ウィンドウ間でメッセージを渡すことができます。使い方はいろいろあります。

  1. 一方通行による通信: メッセージ送信にはあるウィンドウで postMessage 関数を呼び出し、もう一方のウィンドウでは message イベントをリッスンすることでメッセージを受信します。コードの例を以下に示します。

メッセージを送信するウィンドウ

window.postMessage('Hello', 'https://example.com');

メッセージを受信するためのウィンドウです。

window.addEventListener('message', function(event) {
if (event.origin === 'https://example.com') {
console.log(event.data); // 输出: Hello
}
});
  1. 双方向への通信：2 つのウィンドウ間で通信チャネルを構築し、そこでメッセージを双方向に送信できます。例を下記に示します。

ウィンドウ1:

var channel = new MessageChannel();
var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello', '*', [channel.port1]);
channel.port2.addEventListener('message', function(event) {
console.log(event.data); // 输出: World
});
channel.port2.start();

iframe の src が同ドメインのページのウィンドウ 2::

window.addEventListener('message', function(event) {
if (event.source === iframe.contentWindow) {
event.ports[0].postMessage('World');
}
});
  1. 同一ウィンドウ内の異なるコンテキスト間で通信：同一ウィンドウ内の異なるコンテキスト間では postMessage 関数を使用して通信できます。以下にサンプルコードを示します。

同一オリジンでないiframeとメインウィンドウ（ウィンドウ1）のスクリプト

window.addEventListener('message', function(event) {
if (event.origin === 'https://example.com') {
console.log(event.data); // 输出: Hello
}
});
var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello', 'https://example.com');

ウィンドウ２（iframe内スクリプト）:

window.parent.postMessage('Hello', '*');

これらはpostMessageの一般的な使用法であり、実際のニーズに応じて適切な方法を選択して通信することができます。

bannerAds