实现一个客户端发送 “1+2“ 跨域的另一个页面中，回调返回”3“的场景。
客户端：请在 http://127.0.0.1/pk/index.html 打开
<html>
<meta charset="utf-8" />
<head>
<title>
测试页面, http://127.0.0.1/pk/index.html
</title>
</head>
<body>
<iframe id="database" src="http://localhost/pk/database.html">
</iframe>
<script type="text/javascript">
function SyncMessageClient(win,domain){
var funName = 0;
var scope = {};
function getNextCallbackName(callback){
var retfunc = "cb_" + (funName++);
scope[retfunc] = function(){
callback.apply(win,arguments);
}
return retfunc;
}
window.addEventListener("message",function(ev){
var rdata = JSON.parse(ev.data);
var fn = scope[rdata.fn];
fn(rdata.args);
delete scope(rdata.fn);
})
this.sendMessage = function(targetWindow,data,callback,targetDomain){
var callData = {data:data,fn:getNextCallbackName(callback)};
targetWindow.postMessage(JSON.stringify(callData),targetDomain);
}
};
function SyncMessageServer(win,domain,onSendMessage){
window.addEventListener("message",function(ev){
var json = JSON.parse(ev.data);
var fn = json.fn;
console.dir(json);
ev.data = JSON.stringify(json);
var result = onSendMessage(ev);
ev.source.postMessage(
JSON.stringify({fn:fn,args:[result]}),"*");
});
}
var objSyncMsg = new SyncMessageClient(window,"*");
function send(data,callback,domain){
var databaseWindow = document.getElementById("database").contentWindow;
objSyncMsg.sendMessage(databaseWindow,"1+2",function(ok){
alert(ok);
},"*");
}
</script>
<input type="button" value="click me" onclick="send()"></input>
</body>
</html>
服务的实现：
<html>
<meta charset="utf-8" />
<head>
<title>
存储页面
</title>
</head>
<body>
<script type="text/javascript">
function SyncMessageServer(win,domain,onSendMessage){
window.addEventListener("message",function(ev){
var json = JSON.parse(ev.data);
var fn = json.fn;
ev.data = JSON.stringify(json);
var result = onSendMessage(ev);
ev.source.postMessage(
JSON.stringify({fn:fn,args:[result]}),"*");
});
}
var sendMessageServer = new SyncMessageServer(window,"*", function (ev) {
var json = JSON.parse(ev.data);
var fn = json.fn;
var result = eval(json.data)
return result;
})
</script>
</body>
</html>
