聚焦导致父页面监听事件失效
评论 0 热度 773
当页面插入iframe，并聚焦到其内部时，父页面对于事件的监听都会失效，需要再次聚焦到父页面，才能继续监听。
下面这个是例子，聚焦在父页面时按下按键可提示，当点击iframe内部时，按下按键无反应。
<!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父页面，可以通过定时器完成：
<input id="toolman" type="input" readonly="readonly" />
<script>
setInterval(function(){
document.getElementById('toolman').focus();
}, 1000);
</script>不过这样设置后，在iframe内如果有输入框的话，会把人搞疯的，2333333。
附加提示：在移动端会弹出虚拟键盘，所以给输入框添加了readonly属性。
最近在开发h5电视应用，发现问题更多，按下遥控按键时貌似会自动聚焦到iframe，导致按好几下都监听不到，然后我DIV了一个透明的全屏遮罩，问题依旧没有完美解决，偶尔还是会需要按好几下，懒得搞了。。