iframeおよびドメイン間通信postMessage()
2761 ワード
一、window.postMessage()
window.PostMessage(info,origin)メソッドは2つのパラメータを受け入れることができる
1.info:転送するデータは、json形式(json形式が好きなので)の一部のブラウザで文字列パラメータしか処理できないので、パラメータを転送する際にJSONを使用する必要があります.stringify()メソッドオブジェクトパラメータのシーケンス化
2.origin:文字列パラメータ、ターゲットウィンドウのソース、プロトコル+ホスト+ポート番号[+URL]を指定します.URLは無視されますので、書かなくてもいいです.このパラメータは安全のため、postMessage()メソッドは指定ウィンドウにメッセージのみを渡すか、パラメータを「*」に設定して任意のウィンドウに渡すことができます.
二、サブページから親ページへの情報伝達及びサブページ受信
三、親ページの傍受情報及び親ページから子ページへの情報伝達
四、iframeを動的に作成し、iframeの内容を設定する
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='