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); });
评论
Korolev单页应用程序框架
Korolev,单页应用程序框架,是在服务器端运行一个单页应用程序,在浏览器中只保留接收命令和发送事件的交互。单页面立即加载,工作速度快,因为它的计算量很小。重要的是,Korolev为整个堆栈开发提供
Korolev单页应用程序框架
0
knockout-spa单页应用框架
用Knockout,Require,Director,jQuery,Sugar搭建的单页程序(SPASinglePageApplication)框架。特征快速,轻巧(缩小了100KB的JS,并压缩为初
knockout-spa单页应用框架
0
xdiv.js单页应用框架
xdiv是一个单页应用框架~目前主要用于HTML5HybridApp现在功能是可以将其他html中代码引入到主html使单页应用代码易于维护依赖JQuery和Animate.css若不需特效可以不引用
xdiv.js单页应用框架
0
ExtApp单页 Web 应用框架
ExtApp是一个基于三层架构,使用NHibernate、APIController和ExtJs创建的,用于简化政府和企业应用开发的单页Web应用框架。使用NHibernateCodeFirst自动创
ExtApp单页 Web 应用框架
0