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

推薦する

MySQLインデックスが使用されない状況のまとめ

MySQL のインデックスの種類一般的に、次の 4 つのカテゴリに分類できます。通常のインデックス:...

HTMLはBaidu百科事典のナビゲーションドロップダウンメニュー機能を模倣します

HTML は、Baidu 百科事典のナビゲーション ドロップダウン メニュー機能を模倣します。具体的...

Vue マルチページ構成の詳細

目次1. 複数ページの違い2. SPAとMPA 3. Vue Cli スキャフォールディング構成1....

ログインボックスのドラッグ効果を実現するためのJavascript

この記事では、ログインボックスのドラッグ効果を実現するためのJavascriptの具体的なコードを参...

Mysql5.7 サービスを開始できません。グラフィカル ソリューション チュートリアル

p>「サービス」で手動で起動すると、 コンソールから起動します: 次に、...\MySQL S...

Docker を使用した war パッケージ プロジェクトのデプロイの実装

Docker で war をデプロイするには、コンテナを使用する必要があります。ここでは tomca...

Keepalived は Nginx の負荷分散と高可用性のサンプル コードを実装します

第1章: keepalivedの紹介VRRP プロトコルの目的は、静的ルーティングの単一点障害問題を...

簡単な手順で純粋な CSS3 で 3D 反転効果を実現

フロントエンド開発者の必須科目であるCSS3は、多くの基本的なアニメーション効果を実現するのに役立ち...

VueのVuexの4つの補助機能について

目次1. 補助機能2. 例1. mapState と mapGetters 2. mapMutati...

Windows 10 で Hyper-V サービスをシャットダウンするいくつかの方法

VMware Workstation を使用して Windows 10 で仮想マシンを開くと、VMw...

htmlハイパーリンクaのクリックイベントの後、hrefで指定されたアドレスにジャンプします。

場合によっては、ジャンプを完了するために href の代わりにハイパーリンク <a> を...

MySQL データベースの操作とデータ型

目次1. データベース操作1.1 データベースの表示1.2 データベースを作成する1.3 データベー...

ウェブデザイナーのための超便利なツール 50 選

ウェブデザイナーになるのは簡単ではありません。デザインやアーキテクチャを考慮するだけでなく、さまざま...

MySQL 8.0.13 のインストールと設定のグラフィックチュートリアル

Msyqlデータベースのインストール、参考までに具体的な内容は次のとおりです。 ①ブラウザでhttp...

MYSQL(電話番号、IDカード)データ非感応化の実装

1. データ感度低下の説明日常の開発ニーズでは、データの感度低下が頻繁に発生します。たとえば、ID ...