当页面插入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了一个透明的全屏遮罩，问题依旧没有完美解决，偶尔还是会需要按好几下，懒得搞了。。