This action will force synchronization from mqycn/FrameController.js, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
优雅的处理单页多框架(<iframe>)窗口管理同步问题
下载后安装到 网站的任意目录,打开 http://您的域名/安装路径/demo/demo.html 即可进行测试。(因为本地浏览器会显示iframe,所以必须放到Web服务器中)
在线测试地址:http://www.miaoqiyuan.cn/products/frame-controller/
{
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);
});
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。