禁止浏览器后退操作的实现方法


摘要:
下文分享使用js禁用浏览器后退的方法,如下所示:

现在的业务系统,大多数都采用了B/S的模式,都是基于浏览器进行访问。为了使系统具有更好的用户体验,我们应该禁止点击浏览器后退按钮,避免在用户操作的过程中突然出现回退,而导致刚刚录入的内容全部丢失的现象,下文讲述了三种禁止浏览器回退的方法,如下所示:

方法1:回退后立即再向前

   <script language="JavaScript">
     javascript:window.history.forward(1); 
     //此方法虽然禁用了回退后立即向前进一页,其实也是回退了,所以不是最理想的解决方案
    </script>


方法2:将键盘的backspace键功能禁止掉,可以有效的避免键盘的误操作

   <script language="JavaScript">

       //定义禁用backSpace方法
      function stopBackSpace(e){ 
             var ev = e || window.event;//获取当前操作对象
             var obj = ev.target || ev.srcElement;//获取对象所属目标信息
    
            var t = obj.type || obj.getAttribute('type');//获取事件源类型 
 
           var vReadOnly = obj.getAttribute('readonly');  //获取对象的readonly属性
          var vEnabled = obj.getAttribute('enabled');     //获取对象的enabled属性
          //属性的null值判断
         vReadOnly = (vReadOnly == null) ? false : vReadOnly; 
         vEnabled = (vEnabled == null) ? true : vEnabled; 
  
         //按击backspace键时,如果操作类型为 密码文本 readonly=true  enabled=false 时,
         //不禁用此键,正常返回
         if(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") 
                && (vReadOnly==true || vEnabled!=true))
            {
                return true;
             }else
              {
                 return false;
             }
  } 

         //绑定事件至浏览器上(适用Firefox、Opera) 
         document.onkeypress=stopBackSpace; 
         //绑定事件至浏览器上(适用IE、Chrome) 
        document.onkeydown=stopBackSpace; 

    </script>


方法3:最佳解决方案,使用监控popstate的方法


    <script language="JavaScript">
           history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
        });
    </script>