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

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


代码如下:

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扩展中看到此技术身影。

赞 (0)

相关推荐

  • 深入浅析JavaScript中数据共享和数据传递

    数据共享和数据传递是相辅相成的,我们一起来讨论这个问题.首先要说的是共享和传递都是有作用域的.作用域就是起作用的区域,在同一个作用域数据可以共享,超过这个作用域就是跨作用域,就得用到数据传递了. 作用域 1.ui作用域 每一个ui文件缺省都有对应的ui.js.他们作为一个闭合的作用域.ui.js里根据ui文件里组件的id来获取ui对象;不同的ui文件可以定义相同id的组件.在ui.js里定义的变量只能在这个js里访问. 2.page作用域 每次调用openPage都会打开一个新的page,这个新

  • Ajax中数据传递的另一种模式 javascript Object Notation思想（JSON）

    Ajax是"异步javascript和XML"的缩写已经众所周知,然而虽然XML是看上去的重要组成部分,它却不是必须的.一位资深的软件工程师Douglas Crock ford 开发了一个内建于 javascript 的数据格式,称为javascript 对象表示(JSON,javascript Object Notation),意思是直接使用Ajax对象来传递信息,可以读作"Jason". 1. 什么是 JSON JSON概念很简单,JSON 是一种轻量级的数据格

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

    在iframe与父窗口或者与子窗口传递数据是一个麻烦的事情,如果我们能够写一个一劳永逸的接口那就再方便不过了,下面就来简答介绍一下如何实现此功能.原理就是将数据缓存早window.top这个窗口,这样无论子窗口父窗口的层次如何变化,数据总是存在不会变化的. 代码如下: var share={ data:function(name,value){ var top=window.top, cache=top['_CACHE']||{}; top['_CACHE']=cache; return val

  • $.ajax json数据传递方法

    前台 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页&l

  • Javascript 表单之间的数据传递代码

    一,最简单的就是同一个网页里的表单的数据传递. 举个实例,一个网页上有两个表单,每个表单里一个文本框,一个按钮.点按钮互相对操作对方的文本框的值.我们举的例子是把一个文本框付给另一个文本框.具体的HTML代码如下:  复制代码 代码如下: <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/

  • Javascript与vbscript数据共享

    如有纰漏之处,请指出,谢谢 1.普通全局变量 在browser里,引用一个全局变量,可以有很多方法,你可以直接引用该变量,也可以用window.variable来引用全局变量,原因是因为全局变量属于window的窗体,但是当每新开一个窗口,浏览器会自动清空先前已有变量(也就是说,每个新开页面都是一个"有清白之身的web页",因此在新开的窗口里是不可以引用之前定义的变量,如果要引用,可以变向获取,如通过URL的参数传递等方法来获取,但这是后话了)如: <script> var

  • Angularjs实现多个页面共享数据的方式

    废话不多说了,直接看干货吧. 使用service来共享数据 定义一个共享服务的service //家电维修共享数据的服务 angular.module("sqhApp").factory("repairDeviceDataShareServer",function($http,$state,$ionicPopup){ return { //缓存当前需要维修的设备名称.数量.唯一标识 deviceRepairObj : [], //小区位置 xiquLocation:

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

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

  • 详解vue组件之间相互传值的方式

    概述 我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值 即父组件通过属性的方式向子组件传值,子组件通过 props 来接收

  • C#开发Winform实现窗体间相互传值

    目录 一.前言 二.公共属性 三.公共方法 四.委托 1.定义一个委托 2.实例化一个此委托类型的事件 3.定义要执行的方法 4.将方法绑定到事件 5.触发委托 一.前言 我们在做Winform窗体程序开发的时候,会经常遇到窗体之间相互传值.假设有下面的一个场景:一个主窗体和一个子窗体,点击主窗体上面的按钮给子窗体传值,并在子窗体上面显示出来,一般会有如下几种方式实现. 二.公共属性 我们可以在子窗体里面定义一个公共的属性,然后在父窗体里面给公共属性赋值,这样可以实现窗体之间传值,子窗体代码如下

  • 详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别

    如下所示: 1.index.html文件入口: 2.src放置组件和入口文件: 3.node_modules为依赖的模块: 4.cofig中配置了路径端口值等: 5.build中配置了webback的基本配置.开发环境配置.生产环境配置等. main.js是我们的入口文件,主要用于初始化vue实例,并使用需要的插件. App.vue是我们的主组件,所有的页面都在App.vue下进行切换.我们可以将router标示为App.vue的子组件. 6.在每个模板中给style设置一个scoped属性,意

  • Python+unittest+requests 接口自动化测试框架搭建教程

    一.Python+unittest+requests+HTMLTestRunner 完整的接口自动化测试框架搭建_00--框架结构简解 首先配置好开发环境,下载安装Python并下载安装pycharm,在pycharm中创建项目功能目录.如果不会的可以百度Google一下,该内容网上的讲解还是比较多比较全的! 大家可以先简单了解下该项目的目录结构介绍,后面会针对每个文件有详细注解和代码. common: --configDb.py:这个文件主要编写数据库连接池的相关内容,本项目暂未考虑使用数据库

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

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

  • vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

    vue拖拽克隆clone组件API, vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档) 效果图: -------------------------------------------------------------------------------- 首先需要安装vuedraggable依赖包: npm install vuedraggable --save 因为拖拽组件依赖sortablejs ,如果项目没有安装sortablejs ,可能需要安装一下 np

  • Node.js创建一个Express服务的方法详解

    Node.js创建一个Express服务的方法详解

    本文实例讲述了Node.js创建一个Express服务的方法.分享给大家供大家参考,具体如下: 1.创建一个HttpServer服务端 在node.js官网下载好node的Windows版本后一路下一步安装好了node,新建一个server.js文件,开始第一个node文件.首先在文件开头需要使用require包含所需要的模块,然后利用http.createServer创建一个server,并执行回调函数.在回调函数内对请求req进行处理,并返回res结果. 利用url的parse方法将req请

  • Pytest+Yaml+Excel 接口自动化测试框架的实现示例

    Pytest+Yaml+Excel 接口自动化测试框架的实现示例

    目录 一.框架架构 二.项目目录结构 三.框架功能说明 四.核心逻辑说明 配置文件 输出目录 请求工具类 代码编写case 程序主入口 执行记录 一.框架架构 二.项目目录结构 三.框架功能说明 解决痛点: 通过session会话方式,解决了登录之后cookie关联处理 框架天然支持接口动态传参.关联灵活处理 支持Excel.Yaml文件格式编写接口用例,通过简单配置框架自动读取并执行 执行环境一键切换,解决多环境相互影响问题 支持http/https协议各种请求.传参类型接口 响应数据格式支持

  • vue中组件之间相互通信传值的几种方法详解

    目录 vue中组件之间相互通讯传值的方式 1.子组件和父组件通讯,通过调用父组件给组件自定义属性值来实现 2.父组件主动获取子组件数据 3.使用provide/inject方法实现 4.使用事件总线 5.vuex\localStorage\sessionStorage 总结 vue中组件之间相互通讯传值的方式 我们在使用vue进行项目开发的时候为了更好地管理项目,我们会把每个功能封装成一个个的组件,在使用的时候直接引入并且调用组件来实现代码的复用. 我们在封装组件的时候经常会留有一些预留的接口,

随机推荐