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 のバージョンについて説明します。 mysql> バージョンを選択します();...

gorm で MySql データベースを操作する方法

1. テーブル内のフィールドの大文字と小文字の区別を設定するgorm クエリを使用する場合、MySQ...

Dockerfile に基づいて Tomcat イメージを構築する方法

Dockerfile は Docker イメージを構築するために使用されるファイルです。コマンドパラ...

DockerはMariaDBのサブライブラリとサブテーブル、および読み書き分離機能を実装します

目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...

MySQL の binlog ログと、binlog ログを使用してデータを回復する方法を説明します。

ご存知のとおり、binlog ログは MySQL データベースにとって非常に重要です。万が一、データ...

Unix/Linuxフォークの隠れたオーバーヘッド

目次1. フォークの起源2. 初期のUNIXオーバーレイ技術3. UNIXに導入される前のフォークの...

nginxを使用して取得したIPアドレスが127.0.0.1である問題を解決する

IPツールを取得 lombok.extern.slf4j.Slf4j をインポートします。 org....

MySQL 8.0.15 のインストールと設定方法のグラフィックチュートリアル (Win10 Home バージョン 64)

超初心者の私は、MySQL を学び始めたばかりで、インストール プロセス中に多くの問題に遭遇しました...

etcd クラスターをデプロイするための docker-compose の実装手順

目次docker-compose.ymlを書くdocker-composeを実行するビルドステータス...

MySQL 最適化: キャッシュ最適化

何人かのブロガーが私の記事を評価してくれたのは嬉しいです。マークと知り合ってからは、私は彼をフォロー...

CSS3 の transition、transform、translate の違いと機能の簡単な分析

変換して翻訳するTransform は、変換と変形を意味します。他の幅属性や高さ属性と同様に、CSS...

ウェブテーブルフレームを作成するためのヒント

<br />Web テーブル フレームを作成するためのヒント。 ------------...

Vueリクエストインターセプターの設定方法の詳しい説明

以下の手順に従ってください1. request.jsコンテンツ: http リクエスト インターセプ...

CentOS IP接続ネットワーク実装プロセス図

1. システムにログインし、ディレクトリに入ります: cd /etc/sysconfig/netwo...