javascript 跨域双向通信方案，通过postMessage和window.name实现
更新：最近项目使用在node-webkit中用于iframe flash的调用，有一个json版本，设计方面还是有些缺陷，没有设计成mian,client可以1对多创建的方式，考虑重构
此方案在IE6,7下面通过window.name实现跨域信息的传递，会导致一系列的BUG，项目中需要兼容的话，请使用以下技术处理
http://www.alloyteam.com/2013/11/the-second-version-universal-solution-iframe-cross-domain-communication
前言：
专门从事js工作其实也有1年时间了，水平一般。获取前端相关的知识，主要通过 司徒正美的博客 和 司徒正美的QQ群-javascript罗浮宫。
在去年的项目中，做消息推送的时候，由于推送服务部署在一个独立的服务上，后来试了一些方案，
最后是通过window.name和postMessage结合的方式解决跨域问题，从而实现消息推送(AJAX 的长轮询).
最近项目比较空，特地花了时间整理了下代码。当然跨域的实现，还是首推JSONP的方式
作用：
我们作为客户端，开放相关API给其他第3方进行访问
（如果该js真的能解决你的需求，希望能支持下，让更多人得到方便）。
原理：
相关原理可以参考 http://js8.in/752.html，对于通过name的方式，本js加入了代理页（about:blank），不会污染主端window.name,结构下图
http://images.cnitblog.com/blog/106679/201303/03124252-f20e364fd2474d3da67ff1b71076bbe1.png
功能：
1.实现main.html和client.html之间的双向通信，通过提供相关Command。
2.通过callback机制，可以方便的对返回的数据进行相应的处理。
3.多参数支持，参数支持字符串，数字，通过加载JSON的js，支持object,数组
例子：
https://github.com/legu2009/cross-domain-javascript
github上有相关例子的环境，可以安装nodejs，进行调试。(去掉注释，可支持json格式,例子简化了下，主要演示一个主端向客户端调用API的过程).
mainAPI.html
http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifhttp://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gifView Code
<body>
</body>
<!--script type="text/javascript" src="http://localhost:9099/json2.js"></script-->
<script type="text/javascript" src="http://localhost:9099/crossDomain.js"></script>
<script>
(function () {
var host = 'main.html';//window.location.host;
var slice = Array.prototype.slice;
typeof console == "undefined" && (console = {
log: function () {
alert(slice.call(arguments).join(':'));
}
});
var config = {
clientUrl: "http://localhost:9098/clientAPI.html"
//,aboutBlank: 'NO'
//,isSameDomain: false
};
var crossDomain = getCrossDomain(config);
/*
crossDomain.message.set({
params2str: function () {
return JSON.stringify(slice.call(arguments, 0));
},
str2params: function (str) {
return JSON.parse(str);
}
});*/
function callback (str) {
var str = slice.call(arguments).join(',') + '=>>';
return function () {
console.log(host+'@',str+slice.call(arguments).join(','));
}
//console.log(host+':'+slice.call(arguments, 0).join(','));
}
crossDomain.message.send('clientCall','hello,i\'m main');//调用命令
crossDomain.message.send('clientCall','your name',callback('your name'));//调用命令，并显示返回值
crossDomain.message.send('clientCall','your mail',callback('your mail'));
crossDomain.message.send('clientCall','your mail', 'the date',{'aa':123},callback('your mail', 'the date',{'aa':123}));//多参数支持
})();
</script>
clientAPI.html
http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifhttp://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gifView Code
<body>
</body>
<!--script type="text/javascript" src="http://localhost:9099/json2.js"></script-->
<script type="text/javascript" src="http://localhost:9099/crossDomain.js"></script>
<script>
(function () {
var host = 'client.html';//window.location.host;
var slice = Array.prototype.slice;
typeof console == "undefined" && (console = {
log: function () {
alert(slice.call(arguments).join(':'));
}
});
var config = {
clientUrl: "http://localhost:9098/clientAPI.html"
//,aboutBlank: 'NO'
//,isSameDomain: false
};
var crossDomain = getCrossDomain(config);
/*
crossDomain.message.set({
params2str: function () {
return JSON.stringify(slice.call(arguments, 0));
},
str2params: function (str) {
return JSON.parse(str);
}
});*/
var apiMap = {
'your name': 'guwei',
'your mail': '89415119@qq.com',
'the date': new Date().toString()
}
crossDomain.clientCommand.add('clientCall', function(str, callback) {
console.log(host+'@','clientCall:',slice.call(arguments));
try {
console.log(host+'@','aa:'+arguments.aa);//判断JSON支持
} catch (e) {}
var callback = arguments;
var ary = slice.call(arguments, 0, -1);
//console.log(host+':'+ary.join(','));
for (var i =0;i<ary.length;i++) {
ary = apiMap]||ary;
}
callback.apply(null,ary);//即使有的API没有数据返回，也需要执行下callback
});
})();
</script>
执行结果：
http://images.cnitblog.com/blog/106679/201303/05155553-89f7d8851d6a4d77abfe8f877ee9f77f.png
页:
[1]