ホームページ よくある問題 ポストメッセージの使い方

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

Nov 27, 2023 am 10:38 AM
postmessage

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)