FrameController.js 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
FrameController.js 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
FrameController.js 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 未知
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 mqycn
适用人群 未知
收录时间 2018-10-11

软件简介

项目介绍

优雅的处理单页多框架(<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);
});

更多说明请访问:http://www.miaoqiyuan.cn/p/framecontroller-js

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣 发布并加入讨论🔥
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
7 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部