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



评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值