Iframe跨域通信完美解决方案
跨域通信这个话题在之前已经提到总结过,关于跨域通信大家可以参考同源策略,跨域资源共享的10种方式以及IE下因设置document.domain而无法和Iframe通信的解决方法。
以前在项目中开发了不少跨域功能,但都比较依赖项目,今天我将跨域功能模块抽出并精简为一个通用的javascript包,它用纯js实现,不依赖于flash,而且已经包含了目前最常用的跨域通信方法:window.postMessage和window.name,大家只需简单引用即可实现单向或双向跨域通信,非常方便。使用方法如下(将下面的代码同时放到要跨域通信的两个页面中):
引入xd.js
<script type=’text/javascript’ src=’http://crossdomain.sinaapp.com/xd/xd.js'></script>
添加监听回调函数
var callback = function(data) {
//data为返回的json对象
}
XD.receiveMessage(callback);
调用跨域通信方法
//target:跨域通信的window对象,parent或iframe.contentWindow
//json:要发送的数据对象,json格式,如:{‘height’:’300px’}
XD.sendMessage(target, json);
Over
至此,一个双向跨域的功能已经完成了,这个方案有一个小小的缺陷,就是会重写window.name,所以请避免在开发中借用window.name来传递数据。
光看代码可能还不太清晰,来看个demo,给大家个使用比较频繁的示例:iframe高度自适应,如有不明白可留言或@woiweb。
demo下载