ポストメッセージの使い方

小老鼠
リリース: 2023-11-27 10:38:36
オリジナル
2285 人が閲覧しました

postMessage メソッドの基本的な使用法: 1. メッセージを送信するウィンドウまたはタブで、postMessage メソッドを使用して、ターゲット ウィンドウにメッセージを送信します。送信するメッセージ オブジェクトとターゲット ウィンドウの識別子 (オプション) の 2 つのパラメーターを受け入れます; 2. ターゲット ウィンドウで、addEventListener メソッドを使用して、他のウィンドウからメッセージを受信するメッセージ イベントをリッスンします。

ポストメッセージの使い方

#postMessage は、ブラウザ ウィンドウ間でメッセージを受け渡すための JavaScript メソッドです。これにより、同じドメイン名やポートにバインドしなくても、開いているブラウザ ウィンドウやタブ間でメッセージを送信できるようになります。

以下は postMessage メソッドの基本的な使用法です:

1. メッセージを送信するウィンドウまたはタブで、postMessage メソッドを使用してターゲット ウィンドウにメッセージを送信します。 。これは、送信されるメッセージ オブジェクトとターゲット ウィンドウのオプションの識別子の 2 つのパラメータを受け入れます。

// 发送消息到目标窗口  
var message = { key1: "value1", key2: "value2" };  
var targetWindow = window.open("https://example.com");  
targetWindow.postMessage(message, "*");
ログイン後にコピー

上の例では、キーと値のペアを含むメッセージ オブジェクトを作成し、window.open 経由で新しいウィンドウを開きました。次に、postMessage メソッドを使用して、メッセージを新しいウィンドウに送信します。

2. ターゲット ウィンドウで、addEventListener メソッドを使用してメッセージ イベントをリッスンし、他のウィンドウからメッセージを受信できます。

// 在目标窗口中监听消息事件  
window.addEventListener("message", function(event) {  
  // 接收并处理发送过来的消息  
  var receivedMessage = event.data;  
  console.log("Received message: ", receivedMessage);  
});
ログイン後にコピー

上の例では、addEventListener メソッドを使用してイベント リスナーを追加しました。これは、別のウィンドウからメッセージを受信したときにイベントをトリガーします。イベント ハンドラーでは、event.data にアクセスして、送信されたメッセージ オブジェクトを取得できます。

postMessage メソッドのセキュリティは非常に重要であることに注意してください。潜在的なセキュリティ リスクを回避するには、メッセージを送信するときにワイルドカード「*」を使用する代わりに検証ドメイン名 (つまり、受信ウィンドウが配置されているドメイン名) を指定することをお勧めします。さらに、ターゲット ウィンドウはメッセージの発信元を検証して、メッセージが信頼できるソースからのものであることを確認する必要があります。

以上がポストメッセージの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート