Child iframe under the same domain triggers parent page events by key

The problem scenario

    The child iframe in the same domain cannot directly use the conventional method to perform key-based (keyboard/mouse) operations on the parent page. It can only monitor the key position of the entire document in the iframe page, and then feed back to the parent page method through parent.window.method Interact.

2. Solutions

1. Example of sub-iframe monitoring

$(function() {
  $(document).on('keyup',parent.window.getKeyCode); // 键盘事件
  $(document).on('mousedown',parent.window.getMouseDownClick); // 鼠标点击事件
  $(document).on('mousewheel',parent.window.getMoouseWheelClick); // 鼠标滚轮事件
});

2. Parent page event feedback

// 左右键
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){
	   // 键盘对应按钮
	}
}

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324399545&siteId=291194637