js を使用して 2 つの HTML ウィンドウ間で通信する方法

js を使用して 2 つの HTML ウィンドウ間で通信する方法

シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必要があります。

ページ A、http://127.0.0.1:10001/A.html

var ドメイン = 'http://127.0.0.1:10001';

ウィンドウを開きます('http://127.0.0.1:10001/B.html');
window.addEventListener('メッセージ', 関数(イベント) {
    if (event.origin !== domain) return;
    console.log('メッセージを受信しました: ' + event.data, event);
}、 間違い);

Bページ、http://127.0.0.1:10001/B.html、openerは現在のウィンドウのオープナーへの参照です

var ドメイン = 'http://127.0.0.1:10001';
window.opener.postMessage("成功", ドメイン);
ウィンドウを閉じる();

AがBを開き、同時にBにデータを送信する必要がある場合

// データを送信しています var domain = 'http://127.0.0.1:10001';
var myPopup = window.open('http://127.0.0.1:10001/B.html');
myPopup.postMessage('データ', ドメイン);

// データを受信する window.addEventListener('message', function(event) {
    イベントの起源が 'http://127.0.0.1:10001' の場合、戻り値は ;
    console.log('メッセージを受信しました: ' + event.data,event);
}、間違い);

上記は、js を使用して 2 つの HTML ウィンドウ間で通信する方法の詳細です。2 つの HTML ウィンドウ間の js 通信の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JSホモロジー戦略とCSRFの詳細な説明
  • JavaScript ホモロジー ポリシーとクロスドメイン アクセスの例の詳細な説明
  • JS で実装された Ajax とホモロジー戦略 (例の説明)
  • jsホモロジー戦略の詳細な説明
  • JavaScriptのEventBusはオブジェクト間の通信を実装します
  • vue websocket nodeJS を使用したリアルタイム通信の落とし穴についての簡単な説明
  • Vue.js コンポーネント通信のカスタムイベントの詳細な説明
  • SpringBoot は jsonp クロスドメイン通信メソッドの例を実装します
  • Vue.js の子コンポーネントが親コンポーネントと通信する方法の詳細なコード例
  • SockJS を使用して vue で webSocket 通信を実装するプロセス
  • JavaScript で同一オリジン通信を実装する方法

<<:  MySQLのトランザクションとデータ一貫性処理の問題を分析する

>>:  Win10 DVWA のダウンロード、インストール、構成のグラフィック チュートリアルの詳細な説明 (初心者向け学習侵入)

推薦する

Nginx は高可用性クラスタ構築を実装します (Keepalived+Haproxy+Nginx)

1. コンポーネントと実装機能Keepalived: Haproxy サービスの高可用性を実現し、...

デザインのヒント: きっと気に入っていただけると思います

<br />このタイトルを見ると、見覚えがあるかもしれません。多くのウェブサイトが同様の...

MySQL8.0.18 複数マスターと 1 スレーブの構成

目次1. 現実的な背景2. 合意3. マスターを構成する3.1. 起動パラメータの設定3.2. パラ...

MySQL パーティション フィールド列に別のインデックスを作成する必要がありますか?

序文パーティション フィールドは主キーの一部でなければならないことは誰もが知っています。では、複合主...

Ubuntuにmysql5.7.10を手動でインストールする

このチュートリアルでは、UbuntuにMySQL 5.7.10を手動でインストールする手順を参考まで...

Chrome プラグイン (拡張機能) 開発ガイド (完全デモ)

目次前面に書かれた序文ChromeプラグインとはChrome プラグイン開発を学ぶことの意義は何です...

Alibaba Cloud ECS サーバーの開始プロセス (初心者必読のチュートリアル)

1. Alibaba Cloudは、個人のニーズに応じて適切なクラウドサーバーを選択し、CPU、メ...

Tomcatのデフォルトプログラム公開パスの使用と変更についての説明

tomcat7 のデフォルトのプログラム公開パスは tomcat/webapps/ROOT/ です。...

Vue組み込みコンポーネントのキープアライブの使用例

目次1. キープアライブの使用使用例: 1. すべてのページをキャッシュする: 2. 条件に基づいて...

クリックして展開し、全文を読む機能を実現する純粋なCSS

注記記事表示リストインターフェースを開発する場合、情報の基本的な概要を提供するために記事ヘッダーコン...

HTMLを使用してシンプルなメールテンプレートを作成する

今日は、「ローテク」の問題について書きたいと思います。ちなみに、私は JavaScript Week...

Mysql5.7 以降での ONLY_FULL_GROUP_BY エラーの解決方法

最近、開発プロセス中に、プロジェクト開発環境に接続されている MySQL データベースは Aliba...

相同性とクロスドメイン、jsonp(関数カプセル化)、CORS原則の詳細な分析

目次同一起源ポリシーAjax リクエストの制限: Ajaxは自身のサーバーにのみリクエストを送信でき...

Puppeteer を使用して Linux (CentOS) で Web ページのスクリーンショット機能を実装する

Linux に puppeteer をインストールするときに、次の問題が発生する可能性があります。こ...

Ubuntu 18.04 Server バージョンのインストールと使用方法 (画像とテキスト)

1 システムのインストール手順OSバージョン:1804イメージのダウンロード: http://cd...