HTML5の新機能を詳しく解説：文書間メッセージ送信

1. 同一ドメイン制限

いわゆる「同一ドメイン制限」とは、セキュリティを考慮して、ブラウザーをスクリプトが同じプロトコル、同じドメイン名、同じポートのアドレスとのみ通信できるようにします

2. window.postMessage メソッド

2 つのウィンドウがロードされていない限り、ブラウザは異なるウィンドウ間の通信を制限します。 window.postMessage メソッドは、この問題を解決するために特別に設計されており、異なるドメイン名を持つウィンドウが相互に通信できるようにします。 変数、message は送信されるメッセージ、targetURL は指定されたターゲット ウィンドウの URL、transferObject は送信される Transferable

オブジェクト

です。

現在の Web ページに新しいウィンドウがポップアップするとします。

targetWindow.postMessage(message, targetURL[, transferObject]);

上記のコードは、コールバック関数を指定します。メッセージ イベントの は、他のウィンドウからメッセージを受信すると、receiveMessage 関数が呼び出されます。この関数は、パラメータとしてイベント イベント オブジェクトを受け取ります。パラメータ内の元の

属性

は、情報のソース URL を示します。 URL が要件を満たしていない場合、event.data 属性には、origin と data に加えて、source 属性も含まれます。現在の Web ページに情報を送信する window オブジェクトです。

次に、postMessage メソッドを使用して、現在の Web ページ上の新しいウィンドウに情報を送信します。

var popup = window.open(...popup details ...);

上記のコードの最初のパラメーターは、実際の情報です。

最後に、送信オブジェクトのドメイン名が http://example.org である必要があることを指定します。 -up window. 次のコードをデプロイします。

window.addEventListener('message', receiveMessage, false);
function receiveMessage(e) {    
if (e.origin != 'http://example.org') {        
return;
    }

    console.log(e.data);
}

上記のコードにはいくつか注意すべき点があります。まず、receiveMessage 関数にフィルターされた情報のソースがありません。次に、postMessage メソッドで指定されたターゲット ウィンドウの URL です。アスタリスクは、情報を任意の URL に送信できることを示します。一般に、これら 2 つの方法は安全性が低く、相手によってフィルタリングされる可能性があるためお勧めできません。ただし、IE8 および IE9 では、postMessage メソッドでのみ iFrame ウィンドウと通信でき、新しいウィンドウとは通信できません。 IE10 では、新しいウィンドウとの通信が可能ですが、IE 固有の MessageChannel オブジェクトのみを使用します

以上がHTML5の新機能を詳しく解説：文書間メッセージ送信の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。