插件用于这么几种状况javascript
1.经过window.opener (子页面向父页面发送数据)html
2.经过window.open (子页面向父页面发送数据)java
3.嵌入iframe (父页面向iframe中页面发送数据)jquery
/** * 客户端通用消息门户框架 * @returns {undefined} */ (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, 'myMP') /*v.hasOwnProperty('myMP')*/ && v.myMP !== null && v.myMP !== undefined) { v.myMP._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 myMP = { /** * 消息总线所在窗口 */ 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;myMP_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); } } }; myMP.register(window); window.myMP = myMP; })(jQuery);
例子 :windows
父页面:框架
<!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></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="jquery-msg.js"></script> <script type="text/javascript"> (function(){ myMP.on("move", function(data,type) { console.log("from opener: x坐标:"+data.x+",y坐标:"+data.y); }); })(); </script> </head> <a href="on.html" target="_blank" >类型1: window.opener</a> <body> </html>
子页面:ui
<!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></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="jquery-msg.js"></script> <script type="text/javascript"> (function(){ document.onmousemove = function(ev) { myMP.send('move', {x: ev.pageX, y: ev.pageY},'test'); }; })(); </script> </head> <h1>经过超连接打开</h1> <body> </html>
结果:this