实现一个客户端发送 “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>
html5 postMessage 实现类似 sendMessage 的同步效果，支持跨域
原文地址：https://www.cnblogs.com/evlon/p/8734019.html