# 锁屏组件★★
# 1.概述
当其他系统通过Iframe窗口嵌入到基础平台,由于iframe的同源策略,导致锁屏无法进行事件监听,需要第三方系统在代码中加入事件监听,并把状态传递给基础平台,第三方系统可以参照如下模板注入代码:
全局操作状态
let lastOperation = {
hasNew: false, // 是否有新操作未发送
data: null, // 操作数据
timestamp: 0 // 操作发生的时间戳
};
// 监听事件发生的时候,调用方法将lastOperation.hasNew设置为true
function handleUserAction(actionData) {
// 更新最后一次操作信息
lastOperation = {
hasNew: true,
data: actionData,
timestamp: Date.now() // 记录当前时间戳
};
}
// 定时检查并发送操作(每5秒执行一次)
setInterval(() => {
// 只有存在新操作时才发送
if (lastOperation.hasNew) {
// 发送的内容固定使用该示例的内容
window.parent.postMessage({
type: 'iframePageOperation',
content: true
}, '*');
// 重置状态(标记为已发送)
lastOperation.hasNew = false;
} else {
// 无新操作,不执行发送
return;
}
}, 5000); // 5秒间隔
// 添加鼠标移动事件的监听,还需要将mousedown、keydown、scroll、touchstart事件一同加上监听
document.addEventListener('mousemove', () => {
handleUserAction({
type: 'mousemove',
content: '鼠标移动',
time: new Date().toLocaleString()
});
});