FrameController.js单页多框架窗口管理
项目介绍
优雅的处理单页多框架(<iframe>)窗口管理同步问题
消息数据结构
{ event: '事件名称', type: 'child', target: '内嵌页的window', data: '传递的数据,即FrameController.broadcast(event, data)的data', frameId: '内嵌页标志' }
使用说明
1、点击发送通知,所有打开的内嵌页都会受到通知。
var addLog = function(from, event, data) { var _old = $('#log').html().substring(0, 3000); $('#log').html( (logTpl + _old) .replace('#EVENT#', event) .replace('#DATA#', JSON.stringify(data)) .replace('#SOURCE#', from) ); console.log('event:', event, 'data:', data); }; //同步通知 FrameController.addListener('broadcast', function(e) { $('#msg').val(e.data.msg); addLog(e.frameId, e.event, e.data); }); //发送广播 $('#send').click(function() { var nums = FrameController.broadcast('broadcast', { msg: $('#msg').val() }); $('#log').html('通知成功:' + nums + '\n\n' + $('#log').html()); }); //更新输入状态 $('#msg').change(function() { FrameController.broadcast('change', { text: '输入框内容已更改:' + $(this).val() }); }); //更新状态 FrameController.addListener('change', function(e) { addLog(e.frameId, e.event, e.data); });
2、新增 内嵌页,关闭内嵌页,可以通过:FrameController.addListener('frame.add',func)、FrameController.addListener('frame.remove',func) 进行监听
//监听系统事件 var addLog = function(from, event, data) { var _old = $('#log').html().substring(0, 3000); $('#log').html( (logTpl + _old) .replace('#EVENT#', event) .replace('#DATA#', JSON.stringify(data)) .replace('#SOURCE#', from) ); console.log('event:', event, 'data:', data); }; //监听系统事件 FrameController.addListener('frame.remove', function(e) { addLog(e.frameId, e.event, e.data); }); FrameController.addListener('frame.add', function(e) { addLog(e.frameId, e.event, e.data); });
3、可以对一个事件增加多个监听方法,可以删除所有监听方法、删除某一个监听方法
var logTpl = '事件:#EVENT# 来源:#SOURCE#\n数据:#DATA#\n\n', addLog = function(from, event, data) { var _old = $('#log').html().substring(0, 3000); $('#log').html( (logTpl + _old) .replace('#EVENT#', event) .replace('#DATA#', JSON.stringify(data)) .replace('#SOURCE#', from) ); console.log('event:', event, 'data:', data); }, msgEventListener = function(e) { $('#log').html('自定义事件已经触发,添加多次会触发多次\n\n' + $('#log').html()); }; //添加自定义事件 $('#add_custom').click(function() { FrameController.addListener('broadcast', msgEventListener); }); //删除自定义事件 $('#remove_custom').click(function() { FrameController.removeListener('broadcast', msgEventListener); });
评论