HTML 5学習ノート(六)-Communication API

本章では、文書間メッセージ通信(Cross Document Messaging)とXML.
一、文書間メッセージ通信
セキュリティ上、同じブラウザで実行されるフレームワーク、ラベルページ、ウィンドウ間の通信は、常に厳格に制限されています.しかし、現実には、異なるサイトのコンテンツがブラウザ内で対話できるようにする合理的なニーズがある.需要を満たすために、ブラウザメーカーと標準制定機関は、ドキュメント間メッセージ通信という新しい機能を導入することに同意してきた.
ドキュメント間メッセージ通信は、iframe、ラベルページ、ウィンドウ間の安全なソース間通信を確保します.postMessage APIをメッセージを送信する標準的な方法として定義します.
 
二、postMessage APIの使用
1、ブラウザのサポート状況の検査
postMessageを呼び出す前に、まずブラウザがサポートしているかどうかを検出する必要があります.次にpostMessageがサポートされているかどうかを検出する方法を示します.

if (typeof window.postMessage === "undefined") {
    //       postMessage
}

2、メッセージの送信
ターゲットページwindowオブジェクトのpostMessage()関数を呼び出してメッセージを送信します.コードは次のとおりです.

window.postMessage("Hello, world", "portal.example.com");

第1のパラメータは、送信されるデータを含み、第2のパラメータは、メッセージ送信の宛先である.iframeにメッセージを送信するには、iframeのcontentWindowでpostMessageを呼び出します.コードは次のとおりです.

document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, world", "chat.example.net");

3、メッセージイベントの傍受
メッセージを受信するときは、ページにイベント処理関数を1つ追加するだけです.メッセージが到着すると、メッセージのソースをチェックして、メッセージを処理するかどうかを決定します.

window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
    switch(e.origin) {
        case "friend.example.com":
            //    
            processMessage(e.data);
            break;
        default:
            //        
            //     
    }
}

メッセージイベントは、data(データ)とorigin(ソース)のプロパティを持つDOMイベントです.Data属性は送信者が伝達する実際のメッセージであり、origin属性は送信元である.
ソースは、ルール、ホスト、ポートから構成されます.
たとえば、httpsやhttpなどのルールが異なるため、https://www.example.comページとhttp://www.example.comページのソースは異なります.
ソースの概念ではパスは考慮されません.次のようになります.http://www.example.com/index.htmlとhttp://www.example.com/page2.html経路が違うだけで、彼らは同じソースです.
ソースは、APIおよびプロトコルに文字列として表示されます.

var originWhiteList = ["portal.example.com", "games.example.com", "www.example.com"];

function checkWhiteList(origin) {
    for (var i=0; i<originWhiteList.length; i++) {
        if (origin === originWhiteList[i]) {
            return true;
        }
    }
    return false;
}

function messageHandler(e) {
    if (checkWhiteList(e.origin)) {
        processMessage(e.data);
    } else {
        //          
    }
}

postMessage APIは、同源および非同源通信に適用することができ、その一貫性に鑑みて、同源ドキュメント間の通信においてもpostMessageの適用を推奨する.
 
三、XML HttpRequest Level 2
XML HttpRequest APIはAjax技術の実現を可能にした.その改善版として、主に2つの改善点があります.

クロスソースXMLHttpRequest;

従来、XMLHttpRequestは同源通信に限られていた.XMLHttpRequest Level 2はCORS(Cross Origin Resource Sharing,ソース間リソース共有)によってソース間XMLttpRequestsを実現した.

進捗イベント

XMLHttpRequest Level 2は、進捗イベントに意味のある名前Progress進捗を使用して名前を付けます.イベントハンドラのプロパティにコールバック関数を設定することで、これらのイベントのリスニングを実現できます.
次の表は、新しい進捗イベント名です.
進捗時間の名前
loadstart
progress
abort
error
load
loadend
 
1、ブラウザのサポート状況の検査
XMLHttpRequestオブジェクトにwithCredentialsプロパティがあるかどうかを検出するのが一般的です.

var xhr = new XMLHttpRequest();
if (typeof xhr.withCredentials === undefined) {
    //      XMLHttpRequest
} else {
    //     XMLHttpRequest
}

 
2、ソース間要求の構築
まず、新しいXMLHttpRequestオブジェクトを作成します.
次に、異なるソースのアドレスを指定して、ソース間XMLHttpRequestを構築します.

var crossOriginRequest = new XMLHttpRequest();
crossOriginRequest.open("GET", "http://www.example.net/stockfeed", true);

リクエスト中にエラーが傍受されることを保証します.
 
3、進捗イベントの使用
XMLHttpRequest Level 2は数値型状態表現ではなく、名前付き進捗イベントを提供します.イベントハンドラのプロパティに対応するコールバック関数を設定すると、これらのイベントをリスニングできます.
進捗イベントには、複数のテキストフィールドが使用され、送信データの合計、送信データの合計、およびデータの合計に既知のブール値が記録されます.

crossOriginRequest.onprogress = function(e) {
    var total = e.toatl;
    var loaded = e.loaded;

    if (e.lengthComputable) {
        //          
    }
}
crossOriginRequest.upload.onprogress = function(e) {
    var total = e.toatl;
    var loaded = e.loaded;

    if (e.lengthComputable) {
        //          
    }
}

 
4、バイナリデータ
Typed Arrayなどの新しいバイナリAPIをサポートするブラウザは、XMLHttpRequestを使用してバイナリデータを送信できます.Level 2仕様はsend()メソッドを呼び出してBlobとArrayBufferオブジェクトを送信することをサポートします.

var a = new Uint8Array([8,6,7,5,3,0,9]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/data/", true);
console.log(a);
xhr.send(a.buffer);

XMLHttpRequest Level 2ではバイナリレスポンスデータも公開されます.responseTypeプロパティ値をtext、document、arraybuffer、またはblobに設定して、responseプロパティが返すオブジェクトタイプを制御します.HTTP応答体に含まれる元のバイトを表示する場合は、responseType属性値をarraybufferまたはblobに設定する必要があります.
 
四、ステップアップ機能
1、構造化データ
以前のバージョンのpostMessageでは文字列のみがサポートされていました.その後、バージョンではJavascriptオブジェクト、canvas imageData、ファイルなどの他のデータ型がサポートされます.ブラウザによってサポートされる場合も異なります.
 
2、Framebusting
Framebustingテクノロジーは、iframeにロードされないコンテンツを保証します.アプリケーションは、まず、ウィンドウが最も外側のウィンドウであるかどうかを検出します.そうでない場合は、そのフレームワークを含むフレームワークをスキップします.

if (window !== window.top) {
    window.top.location = location;
}

ただし、一部の協力者のページがフレームワークでコンテンツを参照できるように選択することができます.一般的な解決策はpostMessageを使用して相互通信ページ間で握手通信を行い、コードは以下の通りである.

var framebustTimer;
var timeout = 3000;

if (window !== window.top) {
    framebustTimer = setTimeout(
        function() {
            window.top.location = location;
        }, timeout);
}

window.addEventListener("message", function(e) {
    switch(e.origin) {
        case trustedFramer :
            clearTimeout(framebustTimer);
            break;
    }
}, true);

 
五、拡張読書
XMLHttpRequest Level 2の使用例については,この記事を参照できるが,例は豊富である.
http://dev.opera.com/articles/view/xhr2/