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はカバーインデックスを使用してテーブルリターンを回避し、クエリを最適化します。

序文カバーリング インデックスについて説明する前に、まずそのデータ構造である B+ ツリーを理解する...

フォームタグの Enctype 属性とその応用例の紹介

Enctype : ブラウザがデータをサーバーに送り返すときに使用するエンコーディングのタイプを指定...

ウェブサイトを高速化する

パフォーマンスは本当に重要ですか?パフォーマンスは重要であり、誰もがそれを知っています。なぜ私たちは...

XHTML 入門チュートリアル: シンプルな Web ページの作成

1 分で最初の Web ページを作成します。簡単な Web ページを作ってみましょう。ぜひフォローし...

Ubuntu 18.04 で MySQL のインストール時にパスワードが要求されない場合の解決方法

Ubuntu 1804 への MySQL 5.7 のインストールについて詳しく紹介します。 MySQ...

JavaScript ベースのランダム点呼システムの実装

この記事では、ランダムロールコーラーを実装するためのJavaScriptの具体的なコードを参考までに...

ナビゲーションデザインと情報アーキテクチャ

<br />ナビゲーションについて話すときは、ほとんどの場合、ナビゲーションがコンテンツ...

ウェブページの表の分割線を削除する方法

<br />Web テーブルの分割線を削除する方法。実際、上記の 3 つの表はいずれも ...

純粋な HTML タグにどれくらい精通していますか?

以下の HTML タグには、基本的に既存のタグがすべて含まれています。数分かけて 1 つずつ参照する...

Dockerを使用してクローンリポジトリを使用してGitイメージを構築する

概要私は 1 年以上 Docker を使用しています。最近、サービスをすばやくオーケストレーションし...

Ubuntu 20.04 は Wi-Fi に接続します (2 つの方法)

最近Ubuntu 20.04をインストールしましたが、Wi-Fiに接続できず、Wi-Fiアイコンも表...

MySql の 4 つのトランザクション分離レベルについて簡単に説明します。

分離レベル:隔離はあなたが考えるよりも複雑です。 SQL 標準では 4 つの分離レベルが定義されてお...

Linux での JDK のインストール (OpenJDK のアンインストールを含む) の概要

1. openjdkを表示する rpm -qa|grep jdk 2. openjdk を削除します...

高同時実行シナリオにおける nginx 最適化の詳細な説明

日常の運用・保守作業では、nginx サービスが頻繁に使用され、nginx の高同時実行性によって生...

CSS エクスペリエンスを充実させる 5 つの便利な CSS セレクターを紹介します

Web デザイナーとして豊富な CSS 経験を持つ私たちは、あらゆる種類のコード構文、互換性、スニペ...