ドメイン間ソリューションのHTML 5 postMessage

11686 ワード

メッセージ

質問シーン:
Webは携帯電話クライアントに埋め込まれた静的ページであり,ユーザの行動を統計するためにgaを導入する必要があるが,gaはlocalhostであってもwwwでなければならない,という矛盾である.解決策は、ページでiframeを使用し、iframeは別のドメイン名の下で、iframeでgaメソッドを呼び出します.iframeのドメイン間通信を解決しなければならないのは明らかだ.

var frame=document.getElementById("gaFrame");
    document.body.onclick=function(){
        var sendData={
            "name":"deals_list",
            "event":"deals_click",
            "e_data":"       "
        }
        frame.contentWindow.postMessage(sendData,"*")
    }

指定された領域をクリックするたびにiframeにメッセージを送信し、iframeでメッセージデータを傍受し、gaを送信する.

var OnMessage = function(e) {
         var data=e.data;
         ga('send', 'pageview',"/"+data);
     }

     function init() {
         if (window.addEventListener) { // all browsers except IE before version 9
             window.addEventListener("message", OnMessage, false);
         } else {
             if (window.attachEvent) { // IE before version 9
                 window.attachEvent("onmessage", OnMessage);
             }
         }
     };
     init();

はい、実際のシーンと方法の紹介が終わりました.着工して関連知識を勉強します.
window.postMessage window.postMessageは、ソース間通信を安全に使用するための方法である.通常、異なるページ上のスクリプトは、この場合にのみ相互アクセスを許可され、実行されるページの位置が同じプロトコル(通常はhttp)、同じポート(httpデフォルトでは80ポート)、および同じホスト(2つのページのdocument.domainの値が同じ)を使用する場合にのみ使用されます.正しく使用される場合、window.postMessageは、この制限を安全に回避するための制御された機構を提供する.window.postMessageは、呼び出すときに保留中のスクリプトが完了するまで、MessageEventをターゲットwindowに派遣しなければならない(例えば、1つのイベントハンドラがwindow.postMessageを呼び出すと、残りのイベントハンドラがタイムアウトを保留するなど).MessageEventには、window.postMessage data ，に対応するwindow呼び出しwindowに第1のパラメータ値として提供するメッセージタイプがある.postMessageの時、window.postMessageマスタードキュメントのソースのorigin属性はソース属性と呼ばれ、どの呼び出しwindowを指す.postMessageのウィンドウ.(イベントの他の標準属性には対応する予想値が存在する.
構文:

otherWindow.postMessage(message, targetOrigin);

otherWindow
        ，        iframe，contentWindow  iframe  window  。

message
     window    

targetOrigin
   ，           URL

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

data:他のwindowからのデータです.
origin:postMessageのウィンドウurlを呼び出します.
source:メッセージウィンドウの参照を送信します.この方法を使用して、異なるソースからのウィンドウを双方向に通信することができる.
セキュリティ

var popup = window.open(...popup details...);

// When the popup has fully loaded, if not blocked by a popup blocker:

// This does nothing, assuming the window hasn't changed its location.
popup.postMessage("The user is 'bob' and the password is 'secret'",
                  "https://secure.example.net");

// This will successfully queue a message to be sent to the popup, assuming
// the window hasn't changed its location.
popup.postMessage("hello there!", "http://example.org");

function receiveMessage(event)
{
  // Do we trust the sender of this message?  (might be
  // different from what we originally opened, for example).
  if (event.origin !== "http://example.org")
    return;

  // event.source is popup
  // event.data is "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);

/*
 * In the popup's scripts, running on <http://example.org>:
 */

// Called sometime after postMessage is called
function receiveMessage(event)
{
  // Do we trust the sender of this message?
  if (event.origin !== "http://example.com:8080")
    return;

  // event.source is window.opener
  // event.data is "hello there!"

  // Assuming you've verified the origin of the received message (which
  // you must do in any case), a convenient idiom for replying to a
  // message is to call postMessage on event.source and provide
  // event.origin as the targetOrigin.
  event.source.postMessage("hi there yourself!  the secret response " +
                           "is: rheeeeet!",
                           event.origin);
}

window.addEventListener("message", receiveMessage, false);

web worker YesでpostMessageとonMessageを使用
プライマリ・スレッドでWorkerインスタンスを作成し、onmessageイベントをリスニング

<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
 <title>Test Web worker</title> 
 <script type="text/JavaScript"> 
     function init(){ 
         var worker = new Worker('compute.js'); 
         //event      data   ，             
         worker.onmessage= function (event) { 
             //              div  
             document.getElementById("result").innerHTML += 
                event.data+"<br/>"; 
         }; 
     } 
 </script> 
 </head> 
 <body onload="init()"> 
 <div id="result"></div> 
 </body> 
 </html>

クライアントのcompute.jsでは,単純に数回の加算操作を繰り返すだけで,最後にpostMessage法により結果をメインスレッドに返し,しばらく待つことを目的とする.この時間内に、メインスレッドがブロックされるべきではなく、ユーザーはブラウザをドラッグ&ドロップすることで、ブラウザウィンドウを大きく縮小するなどの操作テストを行うことができます.この非ブロックマスタースレッドの結果が,Web Workersが達成したい目的である.
compute.jsでpostMessageメソッドを呼び出して計算結果を返す

var i=0; 

 function timedCount(){ 
     for(var j=0,sum=0;j<100;j++){ 
         for(var i=0;i<100000000;i++){ 
             sum+=i; 
         } 
     } 
     //    postMessage         
     postMessage(sum); 
 } 

 postMessage("Before computing,"+new Date()); 
 timedCount(); 
 postMessage("After computing,"+new Date());

cssでよく使われるいくつかのセレクタ

jQueryのプラグインの書き方