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

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

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

以前在项目中开发了不少跨域功能，但都比较依赖项目，今天我将跨域功能模块抽出并精简为一个通用的javascript包，它用纯js实现，不依赖于flash，而且已经包含了目前最常用的跨域通信方法：window.postMessage和window.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下载