iframeおよびドメイン間通信postMessage()

2761 ワード

一、window.postMessage()
   window.PostMessage(info,origin)メソッドは2つのパラメータを受け入れることができる
1.info:転送するデータは、json形式(json形式が好きなので)の一部のブラウザで文字列パラメータしか処理できないので、パラメータを転送する際にJSONを使用する必要があります.stringify()メソッドオブジェクトパラメータのシーケンス化
2.origin:文字列パラメータ、ターゲットウィンドウのソース、プロトコル+ホスト+ポート番号[+URL]を指定します.URLは無視されますので、書かなくてもいいです.このパラメータは安全のため、postMessage()メソッドは指定ウィンドウにメッセージのみを渡すか、パラメータを「*」に設定して任意のウィンドウに渡すことができます.
二、サブページから親ページへの情報伝達及びサブページ受信
//            
//             
window.onload = function() {
    window.parent.postMessage({  //         
    type: "onload",              //        
    data:"do something"         //        object(    json  )        
  }, '*');
}
//object       :JSON.stringify(obj)


//                  
window.addEventListener('message', function(e) {
     console.log(e)   //            
     var data = e.data;       
     if(data && data.type && data.type == 'set') { //     
          conosle.log(data)
          console.log(data.data); //       
          // do something
     }
},false)


三、親ページの傍受情報及び親ページから子ページへの情報伝達
//        js          'message'
window.addEventListener('message', function(e) {
     console.log(e)   //            
     var data = e.data;       
     if(data && data.type && data.type == 'onload') { //     
          conosle.log(data)
          console.log(data.data); //       
          // do something
     }
},false)



//             contentWindow.postMessage   window.postMessage  
var frame=document.getElementById("frame");
frame.contentWindow.postMessage({
    type: "set",
    content:"hello world"
}, "*");


四、iframeを動的に作成し、iframeの内容を設定する
//  iframe

var box=document.getElementById('box');
//           

var box.innerHtml='