HTML5でクロスドメイン通信を行う方法

今回は、HTML5 を使用してクロスドメイン通信を行う方法と、クロスドメイン通信に h5 を使用する方法を説明します。 h5 クロスドメイン通信の 注意事項 は何ですか? 以下は実際のケースです。見てみましょう。

私は最近仕事でニーズに遭遇しました。シナリオは次のとおりです。h5 ページがプレビュー モジュールとして PC ページに埋め込まれており、ユーザーは PC ページ上でいくつかの操作を実行でき、h5 ページはそれに応じて変更を加えます。プレビュー効果。

ここで最初に思いつくのは、iframe を使用して h5 ページを PC の Web ページに埋め込み、PC が postMessage メソッドを通じて変更されたデータを iframe に送信し、iframe に埋め込まれた h5 がデータを受信することです。 addEventListener を通じて、データに応答性の変更を加えます。

postMessage の使用方法の概要は次のとおりです。API は非常に単純です。

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow はターゲット ウィンドウの reference であり、現在のシナリオでは iframe.contentWindow です。

message は送信されるメッセージです。 Gecko 6.0 より前では、メッセージは String である必要があり、それ以降のバージョンでは、オブジェクトを自分でシリアル化せずに直接送信できます。

targetOrigin はターゲット ウィンドウの起点を表し、その値は文字列 "*" (無制限を示す) にすることができます。または URI 。 メッセージ送信時、ターゲット ウィンドウのプロトコル、ホスト アドレス、またはポートのいずれかが targetOrigin で指定された値と一致しない場合、メッセージは送信されません。これら 3 つが完全に一致する場合にのみメッセージが送信されます。送信。機密データの場合、ターゲット ウィンドウの起点を設定することが非常に重要です。postMessage() が呼び出されると、メッセージ

イベント

がターゲット ウィンドウに配信されます。このインターフェイスにはメッセージ イベントがあり、いくつかの重要な属性があります: 1.data: 名前が示すように、渡されるメッセージです

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

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

このようにして、クロスドメイン メッセージを受信したり、同様の方法でメッセージを送り返すこともできます。

オプションのパラメータ転送は、メッセージと同時に渡される一連の Transferable オブジェクトであり、これらのオブジェクトの所有権はメッセージの受信者に転送され、送信者は所有権を保持しなくなります。

その後、iframe が初期化されると、iframe の参照を取得し、次のコードを通じてメッセージを送信できます:

// 注意这里不是要获取iframe的dom引用，而是iframe window的引用
const iframe = document.getElementById('myIFrame').contentWindow;
iframe.postMessage('hello world', 'http://yourhost.com');

iframe では、次のコードを通じてメッセージを受信できます。

window.addEventListener('message', msgHandler, false);

受信時に、必要に応じてメッセージの送信元をフィルタリングして、不正なドメイン名を持つメッセージの受信によって引き起こされる XSS 攻撃を回避できます。

最後に、コードを再利用するために、メッセージの送受信がクラスにカプセル化され、メッセージ タイプ API がシミュレートされるため、非常に使いやすくなります。具体的なコードは次のとおりです:

export default class Messager {
    constructor(win, targetOrigin) {
        this.win = win;
        this.targetOrigin = targetOrigin;
        this.actions = {};
        window.addEventListener('message', this.handleMessageListener, false);
    }
 
    handleMessageListener = event => {
        if (!event.data || !event.data.type) {
            return;
        }
        const type = event.data.type;
        if (!this.actions[type]) {
            return console.warn(`${type}: missing listener`);
        }
        this.actions[type](event.data.value);
    }
 
    on = (type, cb) => {
        this.actions[type] = cb;
        return this;
    }
 
    emit = (type, value) => {
        this.win.postMessage({
            type, value
        }, this.targetOrigin);
        return this;
    }
 
    destroy() {
        window.removeEventListener('message', this.handleMessageListener);
    }
}

これらの事例を読んだ後は、方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

H5の全要素と基本構文のまとめ

H5でビデオタグとオーディオタグとプログレスバーを使用する方法

H5にドラッグアンドドロップ機能を実装する方法

以上がHTML5でクロスドメイン通信を行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。