JavaScript iframe数据共享接口实现方法

更新时间：2016年01月06日 10:38:42 作者：我是代码努力

在iframe与父窗口或者与子窗口传递数据是一个麻烦的事情，如果我们能够写一个一劳永逸的接口那就再方便不过了，下面就来简答介绍一下如何实现此功能，对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');

上面的代码实现了我们的要求，代码比较简单，大家可以自行分析一下，如有任何问题可以跟帖留言。

大家知道JS中Iframe之间是怎么传值的吗？下面给大家简单介绍下。

1.在iframe子页面中获取父页面的元素：

a>window.parent.document这个是获取父页面document中的对象；
b>如果要获取父页面js中的方法：window.parent.xxxx（）；xxxx()为方法；

2.在父页面中获取iframe子页面中的元素：
a>
var child = document.getElementByIdx_x("mainFrame").contentWindow;//mainFrame这个id是父页面iframe的id
child.document;//获取子页面中的document对象；

您可能感兴趣的文章:

javascript使用正则获取url上的某个参数
使用indexOf取得？之后的参数，以&使split进行分割成数组，下面展示了一个从url上获取名为MenuCode参数的过程
2014-09-09
js判断对象是否存在某个属性的几种办法技巧
这篇文章主要给大家介绍了关于js判断对象是否存在某个属性的几种办法技巧,判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
js日期相关函数总结分享
最近写了一个倒计时程序，因为经常要在手机端访问，所以没有引用jquery，对于用习惯jquery的我还真不习惯。下面简单说明js日期相关函数，并说明实现倒计时的原理
2013-10-10
layui实现显示数据表格、搜索和修改功能示例
这篇文章主要介绍了layui实现显示数据表格、搜索和修改功能,结合实例形式分析了layui显示数据表格、搜索和修改功能具体界面布局、功能实现相关操作技巧,需要的朋友可以参考下
2020-06-06
小程序实现录音功能
这篇文章主要为大家详细介绍了小程序实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
这篇文章主要介绍了JavaScript编程设计模式之观察者模式(Observer Pattern),简单说明了观察者模式的概念、原理并结合实例形式详细给出了观察者模式的相关实现与使用技巧,需要的朋友可以参考下
2017-10-10
JS按钮闪烁功能的实现代码
js按钮闪烁功能的实现代码分为html和js两部分代码，具体实现代码大家参考下本文
2017-07-07
JS将网址url转化为JSON格式的方法
这篇文章主要介绍了JS将网址url转化为JSON格式的方法,需要的朋友可以参考下
2018-07-07
parseInt parseFloat js字符串转换数字
转换函数、强制类型转换、利用js变量弱类型转换。
2010-08-08
微信小程序网络封装(简单高效)
这篇文章主要介绍了微信小程序网络封装(简单高效)，微信小程序的网络请求很便捷，直接调用就可以了。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08