[转载]Iframe跨域通信完美解决方案 | 我爱互联网

baacloud免费翻墙vpn注册使用

[转载]Iframe跨域通信完美解决方案 | 我爱互联网.

跨域通信这个话题在之前已经提到总结过,关于跨域通信大家可以参考同源策略跨域资源共享的10种方式以及IE下因设置document.domain而无法和Iframe通信的解决方法

以前在项目中开发了不少跨域功能,但都比较依赖项目,今天我将跨域功能模块抽出并精简为一个通用的javascript包,它用纯js实现,不依赖于flash,而且已经包含了目前最常用的跨域通信方法:window.postMessagewindow.name,大家只需简单引用即可实现单向双向跨域通信,非常方便。使用方法如下(将下面的代码同时放到要跨域通信的两个页面中)引入xd.js:

&lt;<a title="script" href="http://www.woiweb.net/tag/script">script</a> type='text/<a title="javascript" href="http://www.woiweb.net/tag/javascript">javascript</a>' src='http://crossdomain.sinaapp.com/xd/xd.js'&gt;

添加监听回调函数

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下载

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏