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

推薦する

Windows での MySQL 5.7.20 のインストールと設定方法のグラフィック チュートリアル

参考までにWindowsにMySQLをインストールします。具体的な内容は次のとおりです。 1.まずM...

Zen Coding 簡単で素早いHTMLの書き方

禅コーディングテキストエディタプラグインです。 Zen Coding を使用するテキスト エディター...

VueのID認証管理とテナント管理の詳細な説明

目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...

リクエストを転送したり、静的リソースファイルにアクセスしたりする複数の場所への nginx の実装

この記事では主に、リクエストを転送したり、静的リソース ファイルにアクセスしたりする nginx の...

vue+elementui+vuex+sessionStorage を使用して履歴タグ メニューを実装するためのサンプル コード

一般的には、左側にメニューがあった後、ページの上部に履歴タブ メニューを追加する必要があります。他の...

Mysql データベース ストアド プロシージャの基本構文の説明

プロシージャ sp_name を削除します//これまで、MYSQL 構文の基礎知識について説明して...

Vueはechartを使用してラベルと色をカスタマイズします

この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹...

WeChatミニプログラムはどのようにしてユーザー情報とユーザーの電話番号を同時に取得するのか

今日ログインページを書いていたとき、個人情報と携帯電話番号を認証する必要がありましたが、ページにボタ...

フォーム送信ページの更新がジャンプしない

1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

固定テーブル幅テーブルレイアウト: 固定

テーブルを画面全体(残りの空白領域)に表示するために、幅属性は 100% と定義されることが多く、セ...

MySQLデータベースで外部キー制約を使用する必要があるかどうかの詳細な説明

1. はじめに外部キー制約を使用するかどうかという話題は、すでに決まり文句になっています。学校では、...

MySQL でタイムスタンプを日付に変換する例

序文職場で次のような状況に遭遇しました。ログ システムのテーブルでは、時間フィールドには日付データで...

Element PlusはAffixを実装します

目次1. コンポーネントの紹介2. ソースコード分析2.1 テンプレート2.2 スクリプト2.3 実...

JavaScript JSON.stringify() の使用法の概要

目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...

JavaScript タイマー原理の詳細な説明

目次1. setTimeout() タイマー2. setTimeout() タイマーを停止する3. ...