HTML 5ドメイン間ソリューションを解決するpostMessage
7918 ワード
PostMessage()メソッドでは、異なるソースのスクリプトを非同期でデータ転送できます.
2つのパラメータ data
伝達するデータは、パラメータを伝達する際にJSONを使用する必要がある.stringify()メソッドオブジェクトパラメータをシーケンス化 origin
ターゲットのソース、プロトコル、ホスト、ポート番号
ホームページと二次ページをnodeまたは他の方法で起動して効果を表示します.
コード注記の詳細
ホームフェース
二次ページ(iframe)
2つのパラメータ
伝達するデータは、パラメータを伝達する際にJSONを使用する必要がある.stringify()メソッドオブジェクトパラメータをシーケンス化
ターゲットのソース、プロトコル、ホスト、ポート番号
ホームページと二次ページをnodeまたは他の方法で起動して効果を表示します.
コード注記の詳細
ホームフェース
<body>
<input type="button" value=" postmessage_01.html" onclick="sendInfoToAnotherDomain();"/>
<iframe width="1200" src="http://localhost:8180">iframe>
<script>
function sendInfoToAnotherDomain(){
var personInfo= new Object;
//
personInfo.name='Yuelu';
personInfo.title='Hello';
personInfo.info="World";
var str=JSON.stringify(personInfo);
// iframe
var iframe=window.frames[0];
/**
* [http description]
* @type {[type]} ， url
*/
//
iframe.postMessage(str,'http://localhost:8180');
}
script>
body>二次ページ(iframe)
<body onload="receiveInfoFromAnotherDomain();">
<p>postmessage_01p>
body>
<script>
function receiveInfoFromAnotherDomain(){
// message
window.addEventListener("message",function(ev){
// url
if(ev.origin !="http://localhost:8080"){
console.log("the event doesn't come from Domain1!");
return;
}
console.log(ev.data);
// json json
var personInfoJSON = JSON.parse(ev.data);
var name = personInfoJSON.name;
var title = personInfoJSON.title;
var info = personInfoJSON.info;
//
var personInfoString=" ： "+ev.origin+" ."+"
";
personInfoString+=" : "+name+"
";
personInfoString+=" ： "+title+"
";
personInfoString+=" ： "+info+"
";
document.body.innerHTML=personInfoString;
}
);
}
script>