frameset 将截断键盘和鼠标事件的问题解决办法

   最近发现一个网页程序的Bug, 我的 主页面引用了一个 IFrame, 而IFrame里面有 Frameset 的两个Frame. 主页面是有滚动条的, 但是在 FrameSet 的 frame获得焦点时, 无法将键盘(上,下键)或者鼠标中键消息传递给 主页面, 导致无法操作滚动条.

   在网络上找了半天,都没有找到解决办法, 最后还是自已动手, 解决了这个问题.

 

   处理方式是:

        1: 针对frameset 中的每个frame注册键盘和鼠标中键的事件.

        2: 在事件中, 强行对外层页面进行滚动操作.

   相关代码是:

 

   //注册滚动事件

   function registerScroll() {
      try {
        //需要滚动的窗体,对于我的应用,固定为以下窗体
        //如果针对其它门户,需要进行修改或改为参数传递
         var scrollWindows = top.frames(0);
         for(var i = 0; i < frames.length; i++) {
            var h = new ScrollHandle(i,scrollWindows); 
            frames[i].document.attachEvent("onkeydown",h.keyDownhandle); 
            frames[i].document.attachEvent("onmousewheel",h.wheelHandle);
          }
        }catch(err){}
    } 
 
    /**
    * 强制滚动指定的窗体
     */
    function ScrollHandle(index,scrollWindows)  {
         this.keyDownhandle = function() 
         {
           try {
            var keyCode = frames[index].event.keyCode;
            if (keyCode == 40) //下键
                scrollWindows.document.body.doScroll("scrollbarDown");
            else if(keyCode == 38) //上键
                scrollWindows.document.body.doScroll("scrollbarUp");
            else if(keyCode == 37) //左键
                scrollWindows.document.body.doScroll("scrollbarLeft");
            else if(keyCode == 39) //右键
                scrollWindows.document.body.doScroll("scrollbarRight");
            //else 其它键暂时不做处理
          } catch (err){}
      }
      this.wheelHandle = function()
      {
         try {
          var wheelDelta = frames[index].event.wheelDelta;
          if (wheelDelta >= 120) //上滚
                scrollWindows.document.body.doScroll("scrollbarUp"); 
          else if (wheelDelta <= -120) //下滚
                scrollWindows.document.body.doScroll("scrollbarDown");
         } catch (err) {}
       }
   }

 

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值