(js 父子页面数据的交互以及父子页面的侦听)(客户端通用消息门户框架)
2014-07-25 14:28
721 查看
今天记录一下做项目时框架组封装的一个非常强大的客户端通用消息门户框架。此框架可以实现父子页面之间的交互与数据传递。
最常见的有这几种情况:
1:父页面的改变需要传递数据给子页面来改变子页面的内容。
2:子页面完成一些事情通知父页面来做一些改变。
下边先贴出封装的js代码:
以上就是所有的js代码。下边介绍一下此功能的用法:
1:父页面传递数据给子页面:
父页面test.jsp:
子页面test_1.jsp:
上边页面父页面test.jsp里边有个子页面,当点击测试按钮后就会执行ck()方法,然后出发事件,后边{}是出发事件需要携带的数据。而在子页面里边注册了一个treeInfo事件。侦听事件的触发。当事件触发之后子页面就会收到父页面传递的数据。
同理在子页面里边触发事件,在父页面里边添加侦听也可以获取到子页面传递给父页面的数据。
呵呵,其实此框架的封装还有一些其他额外功能,暂时就不再次做说明了。在项目中运用最多的就是这一功能。后续用到其他功能还会再做完善,此文章仅仅用来记录以便日后代码的重用。
最常见的有这几种情况:
1:父页面的改变需要传递数据给子页面来改变子页面的内容。
2:子页面完成一些事情通知父页面来做一些改变。
下边先贴出封装的js代码:
/** * 客户端通用消息门户框架 */ (function($) { "use strict"; var MPBUS = { /** * 路由总线 */ routerBus: {}, /** * 消息管理的窗口列表 */ windows: [], /** * 消息总线的触发器 * @param {type} event 事件类型 * @param {type} data 事件数据 * @param {type} type 数据类型 * @returns {unresolved} */ _fire: function(event, data, type) { var me = this; jQuery.each(this.windows, function(i, v) { if (Object.prototype.hasOwnProperty.call(v, 'RFMP') /*v.hasOwnProperty('RFMP')*/ && v.RFMP !== null && v.RFMP !== undefined) { v.RFMP._fire(event, data, type); } }); //处理路由 jQuery.each(this.routerBus, function(k, v) { if (k === event) { var target = v.target; var func = v.func; var newData = func.call(this, data, type); if (newData != undefined && newData != null) { var targetType; var targetData; if (Object.prototype.hasOwnProperty.call(newData, 'type') /*newData.hasOwnProperty('type')*/ && newData.type != undefined) { targetType = newData.type; } else { targetType = type; } if (Object.prototype.hasOwnProperty.call(newData, 'data')/*newData.hasOwnProperty('data')*/ && newData.data != undefined) { targetData = newData.data; } else { targetData = newData; } me._fire(target, targetData, targetType); } } }); } }; var RFMP = { /** * 消息总线所在窗口 */ BUSWINDOW: undefined, /** * 本窗口消息总线 */ eventBus: {}, /** * 获得窗口的父窗口 * @param {type} win * @returns {unresolved} */ parentWindow: function(win) { if (win === undefined || win === null) return null; var parent = win.opener; if (parent && parent !== win) return parent; parent = win.parent; return parent !== win ? parent : null; }, /** * 获得消息总线窗口 * @param {type} win * @returns {@exp;win@pro;RFMP_Windows} */ _getBusWindow: function(win) { if (win === undefined || win === null) return null; if (jQuery.isPlainObject(win.MPBUS)) { return win; } else { var pwin = this.parentWindow(win); return this._getBusWindow(pwin); } }, /** * 将自身窗口注册到消息总线中 * @param {type} win * @returns {undefined} */ register: function(win) { var busWindow = this._getBusWindow(win); if (busWindow === undefined || busWindow === null) { window.MPBUS = MPBUS; busWindow = window; } var haswindow = false; jQuery.each(busWindow.MPBUS.windows, function(i, v) { if (v === win) haswindow = true; }); if (!haswindow) busWindow.MPBUS.windows.push(window); this.BUSWINDOW = busWindow; }, /** * 向消息门户发送事件 * @param {type} event 事件类型 * @param {type} data 事件数据 * @param {type} type 数据类型 * @returns {unresolved} */ send: function(event, data, type) { if (jQuery.isWindow(this.BUSWINDOW)) { this.BUSWINDOW.MPBUS._fire(event, data, type); } }, /** * 消息注册方法 * @param {type} event * @param {type} func * @returns {undefined} */ on: function(event, func) { this.eventBus[event] = func; }, /** * 消息路由方法 * * @param {type} event 源消息名称 * @param {type} target 目标消息名称 * @param {type} func 数据转换方法,返回的数据使用 {data:newData,type:newType }形封装 * @returns {undefined} */ route: function(event, target, func) { if (jQuery.isWindow(this.BUSWINDOW)) { this.BUSWINDOW.MPBUS.routerBus[event] = {target: target, func: func}; } }, /** * 本窗口事件触发器 * @param {type} event * @param {type} data * @param {type} type */ _fire: function(event, data, type) { var me = this; jQuery.each(this.eventBus, function(k, v) { if (k === event) { v.call(me, data, type); } }); }, /** * 反注册窗口 * @param {type} win */ unregister: function(win) { var busWindow = this.BUSWINDOW; if (jQuery.isWindow(busWindow)) { var deleteIndex = -1; for (var i = 0; i < busWindow.MPBUS.windows.length; i++) { if (busWindow.MPBUS.windows[i] === win) { deleteIndex = i; break; } } } if (deleteIndex >= 0) { busWindow.MPBUS.windows.splice(deleteIndex, 1); } } }; RFMP.register(window); window.RFMP = RFMP; //window.onunload = RFMP.unregister(window); })(jQuery);
以上就是所有的js代码。下边介绍一下此功能的用法:
1:父页面传递数据给子页面:
父页面test.jsp:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>学生管理</title> <script type="text/javascript" src="rflib.js"></script> <script language="javascript"> //注册任意事件 RFMP.on("overClick",callClick);
//回调函数 function callClick(data){ alert("事件监听到了"+data.name); }
function rt(){ //触发事件 RFMP.send("treeInfo",{name:"lych"}); } </script> </head> <body> 测试页面<button onclick="rt()">测试</button> <iframe width=100% height=100% src="test_1.jsp" frameborder="0" ></iframe> </body> </html>
子页面test_1.jsp:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>学生管理</title> <script type="text/javascript" src="rflib.js"></script> <script language="javascript"> function ck(){ RFMP.send("overClick",{name:"lych"});
//注册任意事件 RFMP.on("treeInfo",function(data, treeType) { alert("route"+data.name); }) } </script> </head> <body> iframe测试页面 <button onclick="ck()">点击</button> </body> </html>
上边页面父页面test.jsp里边有个子页面,当点击测试按钮后就会执行ck()方法,然后出发事件,后边{}是出发事件需要携带的数据。而在子页面里边注册了一个treeInfo事件。侦听事件的触发。当事件触发之后子页面就会收到父页面传递的数据。
同理在子页面里边触发事件,在父页面里边添加侦听也可以获取到子页面传递给父页面的数据。
呵呵,其实此框架的封装还有一些其他额外功能,暂时就不再次做说明了。在项目中运用最多的就是这一功能。后续用到其他功能还会再做完善,此文章仅仅用来记录以便日后代码的重用。
相关文章推荐
- 一个封装的在后台弹出JS Alert消息和JS confirm信息以及跳转到指定的页面
- 模态对话框+父子窗口交互+后台数据处理+刷新父页面
- Android MediaPlayer 客户端框架以及消息传递
- js判断是否安装了客户端(针对IE,IE6除外)以及表单提交方式打开新页面
- 一个封装的在后台弹出JS Alert消息和JS confirm信息以及跳转到指定的页面
- C#+JS简单实现 定时轮询数据表 以及时弹出消息提示窗口
- flex4 父子页面数据交互实现(回调函数)
- js前台与后台数据交互-后台调前台(后台调用、注册客户端脚本)
- .net通用权限框架B/S (四)--DAL数据层以及数据接口
- 一个封装的在后台弹出JS Alert消息和JS confirm信息以及跳转到指定的页面
- 自己总结AS3.0与JS(HTML页面)的数据传送交互
- 用.Net打造一个移动客户端(Android/IOS)的服务端框架NHM(二)——“请求”“交互”与传输数据(服务器端)
- asp.net的服务器控件客户端空件的区别以及如何刷新页面不靠数据库数据停留在页面
- C#+JS简单实现 定时轮询数据表 以及时弹出消息提示窗口
- 一个.net客户端通讯框架的设计(四)---协议解码/编码器工厂以及为其他模块提供消息的dealers/trigers
- flex父子页面数据交互实现(回调函数)
- 基于mina服务器框架在android客户端接中文收不到消息以及发送不出中文的的问题
- js_前台页面如何设置radio、checkbox、select三者的值以及绑定事件,方便后台接收数据
- js父子窗口传值以及当前页面在js前台如何获得url参数
- js刷新窗口 (父窗口,以及点确定后的当前窗口) 一般用于页面数据刷新重新加载