代码拉取完成,页面将自动刷新
同步操作将从 mqycn/FrameController.js 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
优雅的处理单页多框架(<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);
});
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。