本文介绍了一种基于window.top缓存的JavaScript iframe数据共享接口实现方法，通过统一缓存机制解决父子窗口间复杂的数据传递问题。同时详细说明了在iframe子页面与父页面之间获取document对象及调用JS方法的常用技巧，为跨窗口通信提供实用解决方案。
iframe数据共享接口原理
在iframe与父窗口或子窗口之间传递数据通常较为繁琐，若能封装一个通用的接口将极大提升便利性。本文简要介绍该功能的实现原理：核心思路是将数据缓存至window.top所指向的顶层窗口中。由于无论子窗口与父窗口的嵌套层次如何变化，顶层窗口始终唯一且稳定，因此数据能够持久存在且保持一致，从而实现跨层级的数据共享。
具体实现代码如下：
数据共享接口代码实现
var share={
data:function(name,value){
var top=window.top,
cache=top['_CACHE']||{};
top['_CACHE']=cache;
return value?cache[name]=value:cache[name];
},
removeData:function(name){
var cache=window.top['_CACHE'];
if(cache&&cache[name])
{
delete cache[name];
}
}
};
share.data('mayi','https://www.jb51.net'); 上述代码已满足数据共享的需求，逻辑相对简单，读者可自行研读分析。若在使用过程中遇到任何问题，欢迎通过跟帖留言交流。
iframe与父页面传值技巧
了解JavaScript中iframe之间如何传值对于前端开发至关重要，下面对此进行简要说明。
1. 在iframe子页面中获取父页面元素的方法：
a. 获取父页面document中的对象，可使用window.parent.document； b. 若要调用父页面js中的方法，格式为window.parent.xxxx（），其中xxxx()代表父页面中定义的具体方法名；
2. 在父页面中获取iframe子页面中的元素： a. 首先通过父页面获取iframe元素的contentWindow对象，例如：var child = document.getElementByIdx_x("mainFrame").contentWindow;，其中mainFrame是父页面中iframe元素的id属性值； b. 随后通过child.document即可获取子页面中的document对象；