利用noVNC通过iframe在页面上打开虚拟机时键盘聚焦问题

          利用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() 。

在layer回调函数中这样写：

 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);
 },