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对象；
相关文章
这篇文章主要为大家介绍了JS前端一千万条弹幕数据循环优化示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本篇文章主要是对js中浮点型运算的问题进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最近一直在努力学习DOM编程这块，这是目前成就感最强烈的一块了，毕老师很认真的给我们讲解了相关知识，并在网上找了很多做的非常棒的网页作为例程给我们进行讲解2009-11-11
这篇文章主要介绍了小程序测试后台服务的方法(ngrok)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了使用Javascript删除指定元素节点的方法,通俗易懂,需要的朋友可以参考下。2016-06-06
本篇文章主要是对简体中文转换繁体中文的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
文本框input聚焦失焦样式实现代码，需要的朋友可以参考下2012-10-10
JavaScript中的for...of和for...in循环容易遇到的问题及解决方法总结
在 JavaScript 编程中,for...of 和 for...in 是常用的循环语法,但它们在使用时可能会引发一些意想不到的问题,本文将分享我在使用这两种循环时所遇到的坑和经验,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了微信小程序加法计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
javascript跨域方法、原理以及出现问题解决方法（详解）
javascript出于安全方面的考虑，不允许跨域调用其他页面的对象。但是在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。跨域简单的理解就是因为javascript同源策略的限制，a.com域名下的js无法操作b.com 或者是c.a.com域名下的对象2015-08-08
最新评论