单页多框架窗口管理 FrameController.js
- 授权协议: 未知
- 开发语言: JavaScript
- 操作系统: 跨平台
- 软件首页: https://gitee.com/mqycn/FrameController.js
- 软件文档: http://www.miaoqiyuan.cn/p/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);
});
