PostMessageはどれほど使いやすいのか

postMessageとは何ですか?
postMessage()メソッドでは、異なるソースからのスクリプトが非同期で限られた通信を行うことができ、テキスト・アーカイブ、マルチウィンドウ、ドメイン間メッセージングを実現することができます.
Html 5のpostMessageはドメイン間、ウィンドウ間メッセージングを解決する
postMessageのメリット

ドメイン間ページの2つのメッセージング

マルチウィンドウ間のメッセージング

ネストiframeのデータ転送

postMessage()
postMessage()メソッドでは、異なるソースからのスクリプトが非同期で限られた通信を行うことができ、テキスト・アーカイブ、マルチウィンドウ、ドメイン間メッセージングを実現することができます.postMessage(data,origin)

data:転送するデータ、html 5仕様ではこのパラメータはJavaScriptの任意の基本タイプまたはコピー可能なオブジェクトであってもよいが、すべてのブラウザがこれを行ったわけではなく、一部のブラウザでは文字列パラメータしか処理できないため、パラメータを転送する際にJSONを使用する必要がある.stringify()メソッドはオブジェクトパラメータをシーケンス化し、低バージョンIEでjson 2を参照する.jsは類似の効果を実現することができる.

origin:文字列パラメータ、ターゲットウィンドウのソースを示す、プロトコル+ホスト+ポート番号[+URL]、URLは無視されるので書かなくてもいい、このパラメータは安全のため、postMessage()メソッドは指定ウィンドウにメッセージのみを渡す、もちろんパラメータを「*」に設定して任意のウィンドウに渡すことができる、現在のウィンドウと同じソースを指定する場合は「/」に設定します.

例:

// A   [http://a.com]
const data = document.getElementById('name').value;
window.frames[0].postMessage(data,'http://b.com');

メッセージイベントをBページで傍受し、渡されたデータを取得する

// B   [http://b.com]
window.addEventListener('message', function(ev) {
    //                ，       ，            ,
    if (ev.source !== window.parent) return;
    var data = ev.data;
    console.info('message from parent:', data);
}, false);

このような伝達と受け入れのプロセスによって、完全なメッセージングを実現することができる.A,Bがドメイン間であるか,ネスト関係があるかにかかわらず,postMessageを用いてメッセージングを実現することができる.
MessageEventのプロパティ

data:ソースから渡されたmessage

source:メッセージを送信するウィンドウオブジェクト

origin:メッセージウィンドウを送信するソース(プロトコル+ホスト+ポート番号)

いくつかのソースから送信されたメッセージのみを処理する場合、originを使用して判断し、いくつかのソースのmessageのみを処理することで、不要な値をフィルタリングするのに便利です.
問題を解決する
最近、自分のコード【A_child】はIframe方式でAシステムに置かれている問題があります.コードにはAシステムのログイン時のユーザー情報が必要なので、Aシステムのクッキー情報が必要です.現在の処理方法は、私のコードをAシステムのサーバに配備し、異なるポートを指定することで、iframeを埋め込むことでクッキー共有を実現します.しかし欠点は、コードを更新するたびにAシステムの担当者が更新する必要があることです.大量の人力と時間のコストを費やした.
注意:同じドメイン名で、異なるポートでクッキー情報を共有できます.
最近、自分の仕事の負担を軽減するために、中間層のページを書くことにしました.Aシステムの下に置いて、メニューの指向は変わりません.中間層のページの中でiframeを1回ネストして、このページでAシステムのクッキー情報をpostMessageでorigin側に送信します.
注意:自分のコードが入るときはユーザー情報を持ってテーブルデータを要求する必要があるので、ページのすべての操作はmessageを受け取ってから行わなければなりません.次のコードがあります

window.addEventListener('message', (ev) => {
    if (ev.source !== window.parent) return;
    const data = ev.data; 
    ...
    ...
    ...
    Vue.prototype.userInfo = data;
    new Vue({
        el: '#app',
        router,
        store,
        render: h => h(renderComponents),
    });
}, false);

もちろん,ネストiframeがドメイン間で値を伝達する問題を解決するには,他の2つの方法がある.

hash値を使用して、iframeのsrcのhashに渡す必要がある値dataを配置します.

サブページは親ページに値を伝達し、Cページ【CとAが必要なときは同ドメインの】を借りて、AにBをネストし、BにCをネストし、BにAを伝達するには、CをイベントBUSとして使用し、BのデータはまずCに伝達され、その後、Cを通じてAにデータを伝達することができる.【この方法は篠篠篠さんが使ったことがないでしょう】という方法です.

まとめ
html 5の新しい特性は、postMessageが主にマルチページのメッセージングをより容易に解決し、ドメイン間の問題を効果的に解決することです.使いやすくなった.しかし、自分のニーズに応じて異なる処理方法を選択します.
WeChatの公式アカウントへようこそ
転載先:https://juejin.im/post/5c3efccef265da61290a6a3e