一、问题场景
同域下子iframe无法直接用常规方法对父页面进行键位式(键盘/鼠标)操作,只能通过在iframe页面中对整个document进行键位监听,再通过parent.window.method反馈给父页面方法进行交互操作。
二、解决方案
1、子iframe监听示例
$(function() {
$(document).on('keyup',parent.window.getKeyCode); // 键盘事件
$(document).on('mousedown',parent.window.getMouseDownClick); // 鼠标点击事件
$(document).on('mousewheel',parent.window.getMoouseWheelClick); // 鼠标滚轮事件
});
2、父页面事件反馈
// 左右键
function getMouseDownClick(e){
if(e.button === 0) {
// 左键
}
if(e.button === 2) {
// 右键
}
}
// 滚轮
function getMoouseWheelClick(event, delta){
var dir = delta > 0 ? 'Up' : 'Down';
if (dir == 'Up') {
// 上滚
} else if (dir == 'Down'){
// 下滚
}
return false;
}
// 键位
function getKeyCode(e) {
var evt = e || window.event;
var keyCode = evt.keyCode || evt.which || evt.charCode;
if(keyCode == 82){
// 键盘对应按钮
}
}