FrameController.js單頁多框架窗口管理

項(xiàng)目介紹

優(yōu)雅的處理單頁多框架（<iframe>）窗口管理同步問題

消息數(shù)據(jù)結(jié)構(gòu)

{
    event: '事件名稱',
    type: 'child',
    target: '內(nèi)嵌頁的window',
    data: '傳遞的數(shù)據(jù)，即FrameController.broadcast(event, data)的data',
    frameId: '內(nèi)嵌頁標(biāo)志'
}

使用說明

1、點(diǎn)擊發(fā)送通知，所有打開的內(nèi)嵌頁都會受到通知。

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);
});
 
//發(fā)送廣播
$('#send').click(function() {
    var nums = FrameController.broadcast('broadcast', {
        msg: $('#msg').val()
    });
    $('#log').html('通知成功:' + nums + '\n\n' + $('#log').html());
});
 
//更新輸入狀態(tài)
$('#msg').change(function() {
    FrameController.broadcast('change', {
        text: '輸入框內(nèi)容已更改:' + $(this).val()
    });
});
 
//更新狀態(tài)
FrameController.addListener('change', function(e) {
    addLog(e.frameId, e.event, e.data);
});

2、新增 內(nèi)嵌頁，關(guān)閉內(nèi)嵌頁，可以通過：FrameController.addListener('frame.add',func)、FrameController.addListener('frame.remove',func) 進(jìn)行監(jiān)聽

//監(jiān)聽系統(tǒng)事件
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);
};
 
//監(jiān)聽系統(tǒng)事件
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、可以對一個(gè)事件增加多個(gè)監(jiān)聽方法，可以刪除所有監(jiān)聽方法、刪除某一個(gè)監(jiān)聽方法

var logTpl = '事件:#EVENT# 來源:#SOURCE#\n數(shù)據(jù):#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('自定義事件已經(jīng)觸發(fā)，添加多次會觸發(fā)多次\n\n' + $('#log').html());
    };
 
 
//添加自定義事件
$('#add_custom').click(function() {
    FrameController.addListener('broadcast', msgEventListener);
});
 
//刪除自定義事件
$('#remove_custom').click(function() {
    FrameController.removeListener('broadcast', msgEventListener);
});

更多說明請?jiān)L問：http://www.miaoqiyuan.cn/p/framecontroller-js