客户端通用消息插件

插件用于这么几种情况

1.通过window.opener (子页面向父页面发送数据)

2.通过window.open (子页面向父页面发送数据)

3.嵌入iframe (父页面向iframe中页面发送数据)

/**
 * 客户端通用消息门户框架
 * @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);

例子 :

父页面:

<!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>

子页面:

<!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>

结果:

posted @ 2013-12-11 17:09  hailiang2013  阅读(266)  评论(0编辑  收藏  举报