ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript を使用してブラウザ Windows 間の通信を有効にする方法

JavaScript を使用してブラウザ Windows 間の通信を有効にする方法

DDD
DDDオリジナル
2024-11-20 13:27:15393ブラウズ

How to Enable Communication Between Browser Windows with JavaScript

JavaScript の postMessage API は、異なるウィンドウまたは iframe 間のクロスオリジン通信を安全に有効にするための強力なツールです。これは、親コンポーネントと埋め込み iframe の間でデータを交換するためによく使用され、ドキュメントが異なるソースからのものであっても制御された対話を可能にします。

これは、postMessage を使用して iframe と親コンポーネント間でデータを送信する実際の例です。

// Parent Component
const iframe = document.getElementById("myIframe");

// Send a message to the iframe
iframe.contentWindow.postMessage("Hello from parent", "https://iframe-domain.here");

// Listen the message
window.addEventListener("message", (event) => {
    if (event.origin === "https://iframe-domain.here") {
        console.log("Message from iframe:", event.data);
    }
}, false);


// Iframe Component
// Send a message to the parent
window.parent.postMessage("Hello from iframe", "https://parent-domain.here");

以上がJavaScript を使用してブラウザ Windows 間の通信を有効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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