最近仕事でニーズに遭遇しました。そのシナリオは、h5 ページがプレビュー モジュールとして PC ページに埋め込まれており、ユーザーが PC ページ上でいくつかの操作を行うことができ、その後、h5 ページがプレビュー効果を実現するために応答性の高い変更を加えます。 。
ここで最初に思いつくのは、iframe を使用して h5 ページを PC の Web ページに埋め込み、次に PC が postMessage メソッドを通じて変更されたデータを iframe に送信し、iframe に埋め込まれた h5 が addEventListener を通じてデータを受信することです。 、その後、データに応答して変更を加えます。
postMessage の使用法の概要は次のとおりです。API は非常に簡単です。
otherWindow.postMessage(メッセージ, targetOrigin, [転送]);
otherWindowはターゲット ウィンドウへの参照であり、現在のシナリオでは iframe.contentWindow です。
message送信されるメッセージです。Gecko 6.0 より前では、メッセージは文字列である必要がありますが、それ以降のバージョンでは、オブジェクトを自分でシリアル化せずに直接送信できます。
targetOriginターゲット ウィンドウの起点を表し、その値は文字列 * (無制限を示す) または URI にすることができます。メッセージを送信するときに、ターゲット ウィンドウのプロトコル、ホスト アドレス、ポートのいずれかが targetOrigin で指定された値と一致しない場合、メッセージは送信されません。これら 3 つが完全に一致する場合にのみメッセージが送信されます。機密データの場合、ターゲット ウィンドウの原点を設定することが非常に重要です。
postMessage() が呼び出されると、メッセージ イベントがターゲット ウィンドウに送出されます。このインターフェイスにはメッセージ イベントがあり、いくつかの重要なプロパティがあります。
1.data: 名前が示すように、これは渡されるメッセージです。
2.source: メッセージを送信するウィンドウ オブジェクト
3.origin: メッセージ ウィンドウのソース (プロトコル + ホスト + ポート番号)
このようにして、クロスドメイン メッセージを受信したり、同様の方法でメッセージを送り返すこともできます。
オプションのパラメータ転送は、メッセージとともに渡される一連の Transferable オブジェクトです。これらのオブジェクトの所有権はメッセージの受信者に転送され、送信者は所有権を保持しなくなります。
その後、 iframeが初期化されると、次のコードを通じて iframe への参照を取得し、メッセージを送信できます。
// これは iframe の dom 参照を取得するためではなく、iframe ウィンドウの参照を取得するためであることに注意してください const iframe = document.getElementById('myIFrame').contentWindow;iframe.postMessage('hello world', 'http:/ /yourhost.com' );iframe では、次のコードを通じてメッセージを受信できます。
window.addEventListener('メッセージ', msgHandler, false);受信時に、必要に応じてメッセージの送信元をフィルタリングして、不正なドメイン名を持つメッセージの受信によって引き起こされる XSS 攻撃を回避できます。
最後に、コードを再利用するために、メッセージの送受信がクラスにカプセル化され、メッセージ タイプ API がシミュレートされるため、非常に使いやすくなります。具体的なコードは次のとおりです。
デフォルトのクラス Messager {constructor(win, targetOrigin) { this.win = win; this.targetOrigin = targetOrigin; window.addEventListener('message', this.handleMessageListener, false); => { if (!event.data || !event.data.type) { return } const type =event.data.type; (!this.actions[type]) { return console.warn(`${type}: missinglistener`); } this.actions[type](event.data.value) } on = (type, cb); > { this.actions[type] = cb; } submit = (type, value) => { this.win.postMessage({ type, value }, this.targetOrigin) } return this; window.removeEventListener('メッセージ', this.handleMessageListener);以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。