利用noVNC在页面上直接打开url连接虚拟机时,键盘事件可以被捕捉到(图1),但是当把url放到iframe中时(我是将网页虚拟机界面直接放到layer中,本质上是iframe),键盘事件不能被捕获,必须先点击最顶端的标题栏或者屏幕旁边的部分才能被捕获(图2)。查阅了资料后,发现noVNC在通过iframe显示时确实存在键盘聚焦问题。
图1
图2
查阅了很多方法后,找到了解决方案。目前只针对Chrome和FireFox,IE的问题是个别按键比如回车和删除不能使用,但目前尚无解决方案。
针对chrome:需要在vnc_auto.html中的添加 tabindex=0;如图
chrome到此就可以解决了。
Firefox需要先聚焦到vnc所在iframe的上一层, $('#layui-layer-iframe1').focus() 。
success: function(layero,index){
var id_layer_min = layero.attr("id");
var ids =id_layer_min.split("r");
idtabindex= "#layui-layer"+"-iframe"+ids[1];
var ifr = document.querySelector(idtabindex);
ifr.contentWindow.postMessage({a: idtabindex}, '*');
setTimeout(function (){
$(idtabindex).focus();
},500);
},