同域下子iframe键位式触发父页面事件

一、问题场景

    同域下子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){
	   // 键盘对应按钮
	}
}

猜你喜欢

转载自my.oschina.net/HarleyZhuge/blog/1795971
今日推荐