js创建数据共享接口——简化框架之间相互传值_javascript技巧

很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码:

复制代码 代码如下:

window.parent.document.getElementById("main")
.contentWindow.document.getElementById('input').value =
document.getElementById('myIframe')
.contentWindow.document.getElementById('s0').value;

其实这个问题可以被大大的简化,框架应用中有一个固定不变的窗口叫window.top,如果我们把数据缓存到这个页面,其下所有框架都可以获取到,无论子页面如何变幻。不需要采用Cookie,也不需要采用什么HTML5本地数据库策略,你只需要每个页面引用一个js文件,内容如下:

复制代码 代码如下:

var share = {
/**
* 跨框架数据共享接口
* @param {String} 存储的数据名
* @param {Any} 将要存储的任意数据(无此项则返回被查询的数据)
*/
data: function (name, value) {
var top = window.top,
cache = top['_CACHE'] || {};
top['_CACHE'] = cache;
return value ? cache[name] = value : cache[name];
},
/**
* 数据共享删除接口
* @param {String} 删除的数据名
*/
removeData: function (name) {
var cache = window.top['_CACHE'];
if (cache && cache[name]) delete cache[name];
}
};

这个寥寥数行的方法可以共享任意类型的数据供各个框架页面读取,它与页面名称、层级毫无关系,就算哪天框架页面层级被修改,你也完全不用担心,它可正常工作。
例如,如我们可以在A页面存入共享数据:

复制代码 代码如下:

share.data(‘myblog', ‘http://www.jb51.net');
share.data(‘editTitle', function (val) {
document.title = val;
});

然后某框架页面任意取A页面的数据

复制代码 代码如下:

alert(‘我的博客地址是: ‘ + share.data(‘myblog');
var editTitle = share.data(‘editTitle');
editTitle(‘我已经获取到了数据');

对,就这么简单!你还可以在artDialog 的iframeTools扩展中看到此技术身影。

时间: 2024-10-02 02:36:38

js创建数据共享接口——简化框架之间相互传值_javascript技巧的相关文章

使用Vue.js创建一个时间跟踪的单页应用_javascript技巧

Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应

浅谈js中子页面父页面方法 变量相互调用_javascript技巧

(1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名 window.parent相当于定位到父页面  之后的操作和在父页面中写代码一样写 window.parent.aa();//调取aa函数 window.parent.bb;//调取bb变量 例如:想在子页面中得到id为aaa的文本框的值 window.parent.$("#aaa").val();//这种写法的前提是引用了jquery window.parent.getElementById(&q

跨域传值即主页面与iframe之间互相传值_javascript技巧

需求一:主页面A 怎么向 iframe B 传递数据呢? 这种方式,是主页面需要给 iframe B 传递数据,然后 iframe B 获得到数据后进行特定的处理 实现方式 实现的技巧就是利用 location 对象的 hash 值,通过它传递通信数据,我们只需要在主页面A中设置 iframe B 的 src 后面多加个 #data 字符串(data就是你要传递的数据),如下图所示: 然后在 iframe B 中通过某种方式能即时的获取到这儿 data 就可以了,其实常用的一种方式就是: 1.

安卓中activity与另一个activity的fragment之间相互传值

问题描述 安卓中activity与另一个activity的fragment之间相互传值 activity与另一个activity的fragment之间相互传值 谁能详细说明一下吗 最后给一个例子 谢谢大家 解决方案 activity向另一个activity中的fragment传值fragment 向另一个activity传值并关闭当前activityFragment与Activity之间传值 解决方案二: activity与另一个activity的fragment 也就是activity和act

java工程之间相互传值

问题描述 java工程之间相互传值 a项目向b项目发送用户名和密码,操作b项目数据库,返回到a项目前台验证.问题是:两个项目之间怎么相互之间操作???(最好有源码) 解决方案 1.如果两个项目部署在同一个JVM中,可以直接a项目依赖b项目,然后直接调用b项目中的方法: 2.如果项目不部署在同一个JVM中,可以使用java中的RMI远程方法调用 解决方案二: 把B项目搞成基于Webservice的,提供一个接口出来,a项目直接调用,这样比较方便,也容易维护...

Javascript框架(iframe)之间相互传值程序代码

很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码:  代码如下 复制代码 window.parent.document.getElementById("main") .contentWindow.document.getElementById('input').value = document.getElementById('myIframe') .contentWindow.document.getElementById('s0').value; 看一个我自己做

JS防止网页被嵌入iframe框架的方法分析_javascript技巧

本文实例讲述了JS防止网页被嵌入iframe框架的方法.分享给大家供大家参考,具体如下: 例如: <script type="text/javascript"> if (window!=top) // 判断当前的window对象是否是top对象 top.location.href = window.location.href; // 如果不是,将top对象的网址自动导向被嵌入网页的网址 </script> 这段代码是有效的.但是,有一个问题:使用后,任何人都无法

js window对象属性和方法相关资料整理_javascript技巧

window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy moveTo resizeBy resizeTo scrollBy scrollTo find back forward home stop print blur focus captureEvent enableExternalCapture disableExternalCapture

JavaScript框架(iframe)操作总结_javascript技巧

框架编程概述 一个 HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框架中引用另一个框架中的JavaScript变量.调用其他框架内的函数.控制另一个框架中表单的行为等. 框架间的互相引用 一个页面中的所有框架以集合的形式作为window对象的属性提供,例如:window.frames就表示该页面内所有框架的集合,这和表单对象.链接对象.图片对象等是类似的,不同的是,这