当页面插入iframe,并聚焦到其内部时,父页面对于事件的监听都会失效,需要再次聚焦到父页面,才能继续监听。
下面这个是例子,聚焦在父页面时按下按键可提示,当点击iframe内部时,按下按键无反应。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body onkeydown="testkey(event)">

<iframe src="http://example.com"></iframe>

<script type="text/javascript">
function testkey(e){
keynum = window.event ? e.keyCode : e.which;
alert(keynum);
}
</script>

</body>
</html>

要解决这个问题,要么在iframe内添加监听,要么强行focus父页面,可以通过定时器完成:

1
2
3
4
5
6
<input id="toolman" type="input" readonly="readonly" />
<script>
setInterval(function(){
document.getElementById('toolman').focus();
}, 1000);
</script>

不过这样设置后,在iframe内如果有输入框的话,会把人搞疯的,2333333。
附加提示:在移动端会弹出虚拟键盘,所以给输入框添加了readonly属性。

最近在开发h5电视应用,发现问题更多,按下遥控按键时貌似会自动聚焦到iframe,导致按好几下都监听不到,然后我DIV了一个透明的全屏遮罩,问题依旧没有完美解决,偶尔还是会需要按好几下,懒得搞了。。