基于事件模型的同域内全局事件监听触发实现

最新推荐文章于 2024-12-09 08:00:00 发布

iteye_5900

最新推荐文章于 2024-12-09 08:00:00 发布

阅读量166

点赞数

CC 4.0 BY-SA版权

分类专栏：开源jar包应用文章标签： jquery iframe 全局事件

本文链接：https://blog.youkuaiyun.com/iteye_5900/article/details/82450623

开源jar包应用专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在使用iframe的应用中实现跨窗口事件传递的方法，通过创建全局事件管理器简化了不同页面间的交互过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

构思：
1、在应用中，由于用了iframe，为了方便各个页面不用window.parent.parent这样的调用考虑利用事件模型对此问题进行解决。

2、应用


$.bindge("eventname",function(event,...){
   ...
});
$.triggerge("eventname",params);

3、实现


/**
 * 客户端统一事件管理器
 */
(function($, undefined)
{
    /**
     * 定义全局事件管理器
     */
    var _globalEventManagerWin_ = window;
    var _$globalEventManager = null;
    while (!_$globalEventManager)
    {
        try
        {
            if (!_globalEventManagerWin_.closed
                    && _globalEventManagerWin_._$globalEventManager)
            {
            	_$globalEventManager = _globalEventManagerWin_._$globalEventManager;
                break;
            }
        }
        catch (e)
        {
            // do nothing
        }

        if (!_globalEventManagerWin_.closed
                && _globalEventManagerWin_.parent != null
                && _globalEventManagerWin_.parent != _globalEventManagerWin_)
        {
            _globalEventManagerWin_ = _globalEventManagerWin_.parent;
        }
        else if (!_globalEventManagerWin_.closed
                && _globalEventManagerWin_.opener != null
                && _globalEventManagerWin_.opener != _globalEventManagerWin_)
        {
            _globalEventManagerWin_ = _globalEventManagerWin_.opener;
        }
        else
        {
        	//全局事件管理器
        	var GlobalEventManager = function(config){

        	};
        	//全局事件管理器属性:
        	GlobalEventManager.prototype.$globalEventHandle = $("<_global_event_handle/>");
        	//
        	GlobalEventManager.prototype.eventTypeCallbackMapping = {};

        	//全局事件管理器方法:
        	//添加事件监听器
        	GlobalEventManager.prototype.bind = function(eventType, data, callbackFn){
        		var _self = this;
        		if(!callbackFn && $.isFunction(data)){
        			callbackFn = data;
        			data = [];
        		}
        		//压入堆栈
        		if(!_self.eventTypeCallbackMapping[eventType]){
        			_self.eventTypeCallbackMapping[eventType] = $.Callbacks("unique");
        			_self.$globalEventHandle.bind(eventType, data, function(event){
        				console.log(Array.prototype.slice.call(arguments));
        				_self.eventTypeCallbackMapping[eventType].fireWith(callbackFn,Array.prototype.slice.call(arguments));
        			});
        		}
        		var _whenExceptionRemoveAbleFunction = function(){
        			try{
        				callbackFn.apply(callbackFn,arguments);
        			}catch(e){
        				//console.log('fire bind global event exception: ' + e);
        				_self.eventTypeCallbackMapping[eventType].remove(_whenExceptionRemoveAbleFunction);
        			}
        		};
        		_self.eventTypeCallbackMapping[eventType].add(_whenExceptionRemoveAbleFunction);
        	};
        	GlobalEventManager.prototype.trigger = function(eventType, params){
        		this.$globalEventHandle.trigger(eventType, params)
        	};

            /**
             * 事件管理器全局对象
             */
        	_$globalEventManager = new GlobalEventManager();

        	_globalEventManagerWin_._$globalEventManager = _$globalEventManager;
        	//循环调度，用以清理全局事件管理器中，已经被回收的对象
        	//setInterval(function(){
        	//	
        	//},60 * 1000 );
        }
    }
    //释放引用
    _globalEventManagerWin_ = null;

    var _globalEventCallbacks = {};
    $.extend(
    {
        triggerGlobalEvent : function(eventType, params)
        {
            _$globalEventManager.trigger(eventType, params);
        }, 
        bindGlobalEvent : function(eventType, data, callbackFn)
        {
            _$globalEventManager.bind(eventType, data, callbackFn);
        }
    });
    $.triggerGE = $.triggerge = $.triggerGlobalEvent;
    $.bindGE = $.bindge = $.bindGlobalEvent;
})(jQuery);