今回は、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 サイトの他の関連記事を参照してください。