(js 父子页面数据的交互以及父子页面的侦听)(客户端通用消息门户框架)

最新推荐文章于 2024-04-20 11:50:28 发布

小六杂聊

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量764

点赞数

分类专栏： js 文章标签： javascript 父子页面交互事件侦听

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

今天记录一下做项目时框架组封装的一个非常强大的客户端通用消息门户框架。此框架可以实现父子页面之间的交互与数据传递。

最常见的有这几种情况：

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 οnclick="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 οnclick="ck()">点击</button>
    </body>
</html>

上边页面父页面test.jsp里边有个子页面，当点击测试按钮后就会执行ck（）方法，然后出发事件，后边{}是出发事件需要携带的数据。而在子页面里边注册了一个treeInfo事件。侦听事件的触发。当事件触发之后子页面就会收到父页面传递的数据。

同理在子页面里边触发事件，在父页面里边添加侦听也可以获取到子页面传递给父页面的数据。

呵呵，其实此框架的封装还有一些其他额外功能，暂时就不再次做说明了。在项目中运用最多的就是这一功能。后续用到其他功能还会再做完善，此文章仅仅用来记录以便日后代码的重用。