zoukankan      html  css  js  c++  java
  • 利用js实现 禁用浏览器后退

     现在很多的内部系统,一些界面,都是用户手动点击退出按钮的。但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的。容易出现误操作。 
           所以在有些页面上,适当的禁用浏览器的后退,是可以提高很大的用户体验。 
           在网上查,可以查到很多js禁用后退的材料。

    1、回退后,产生一个前进事件。

           这种方式,不算是一个满意的解决方式。因为用户能体验到,界面的后退,前进。体验不好。

    <script language="JavaScript"> 
    javascript:window.history.forward(1); 
    </script> 

    2、禁用键盘的backspace键

           这种做法,没有办法消除鼠标的误操作

    <script type="text/javascript"> 
    
    //处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外 
    function banBackSpace(e){ 
    var ev = e || window.event;//获取event对象 
    var obj = ev.target || ev.srcElement;//获取事件源 
    
    var t = obj.type || obj.getAttribute('type');//获取事件源类型 
    
    //获取作为判断条件的事件类型 
    var vReadOnly = obj.getAttribute('readonly'); 
    var vEnabled = obj.getAttribute('enabled'); 
    //处理null值情况 
    vReadOnly = (vReadOnly == null) ? false : vReadOnly; 
    vEnabled = (vEnabled == null) ? true : vEnabled; 
    
    //当敲Backspace键时,事件源类型为密码或单行、多行文本的, 
    //并且readonly属性为true或enabled属性为false的,则退格键失效 
    var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") 
    && (vReadOnly==true || vEnabled!=true))?true:false; 
    
    //当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效 
    var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea") 
    ?true:false; 
    
    //判断 
    if(flag2){ 
    return false; 
    } 
    if(flag1){ 
    return false; 
    } 
    } 
    
    //禁止后退键 作用于Firefox、Opera 
    document.onkeypress=banBackSpace; 
    //禁止后退键 作用于IE、Chrome 
    document.onkeydown=banBackSpace; 
    
    </script> 

    3、终极方案:

     也是查找了好多资料才找到的,这种方式,可以消除 后退的所有动作。包括 键盘、鼠标手势等产生的后退动作。

        <script language="javascript">
            //防止页面后退
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', function () {
                history.pushState(null, null, document.URL);
            });
        </script>

           现在,我们项目中就使用了第三种方式。在常用浏览器中,都可以禁用了后退。

    //禁用浏览器返回
    function fobidden_back() {
        //防止页面后退
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate',back_common)
    }
    //启用浏览器返回
    function enable_back() {
        history.go(-1);
        window.removeEventListener('popstate',back_common)
    }
    function back_common() {
        history.pushState(null, null, document.URL);
    }
  • 相关阅读:
    phpcms后台进入地址(包含No permission resources错误)
    phpmyadmin上传大sql文件办法
    ubuntu彻底卸载mysql
    Hdoj 2602.Bone Collector 题解
    一篇看懂词向量
    Hdoj 1905.Pseudoprime numbers 题解
    The Python Challenge 谜题全解(持续更新)
    Hdoj 2289.Cup 题解
    Hdoj 2899.Strange fuction 题解
    Hdoj 2199.Can you solve this equation? 题解
  • 原文地址:https://www.cnblogs.com/sunshq/p/7976827.html
Copyright © 2011-2022 走看看