`
chennaid2
  • 浏览: 53202 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • b_l_east: 在主动模式下,如果有多个客户端,服务器对每一个客户端均使用20 ...
    ftp

js控制浏览器的返回按钮

阅读更多

文章收集了与参考了大量的关于javascript禁用浏览器后退按钮实现代码,有需要的朋友可以看看。

 

1、

<script language="JavaScript">

         javascript:window.history.forward(1);

</script>

利用JS产生一个“前进”的动作,以抵消后退功能,这种方法应该是最简洁的,并且不需要考虑用户连点两次或多次“后退”的情况,缺点是当用户端禁用了JavaScript之后即失效。

 

 

2、

<A HREF="logout.do" onclick="javascript:location.replace(this.href); event.returnValue=false; ">           

Logout (Back Disabled)

</A>

用location.replace从一个页面转到另一个页面。这种方法的原理是,用新页面的URL替换当前的历史纪录,这样浏览历史记录中就只有一个页面,后退按钮永远不会变为可用。我想这可能正是许多人所寻求的方法,但这种方法仍旧不是任何情况下的最好方法。这种方法的缺点在于:简单地运用Response.Redirect将不再有效,这是因为每次用户从一个页面转到另一个页面,我们都必须用客户端代码清除location.history。另外还要注意,这种方法清除的是最后一个访问历史记录,而不是全部的访问记录。

 

 

3、

当键盘敲下后退键(Backspace)后  
1、禁止浏览器自动后退  
2、但不影响密码、单行文本、多行文本输入框等的回退操作

<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>

以上方法都是针对“后退”按钮作出的反应,客户端浏览器需要打开JavaScript代码。

 

 

 

4、禁止缓存

<%      

            response.setHeader("Cache-Control", "no-cache");         

            response.setHeader("Cache-Control", "no-store");        

            response.setDateHeader("Expires", 0);

            response.setHeader("Pragma", "no-cache");

%>

这种方法使用服务器端脚本,强制浏览器重新访问服务器下载页面,而不从缓存读取,结合struts jsp页面中的<logic>标签实现重新定向。

以上各种方法都有一定的局限

 

 

5、

<script language="JavaScript">

function logout(){

    window.close(true);

    window.open("logout.do");

}

</script>

<button onClick="logout()">Logout</button>

这种方法比较偷懒,关掉浏览器再重新开,经过我的测试在视觉上几乎感觉不出来延时,同时又保证了后退按钮不可用(新窗口浏览器后退按钮为灰色),看起来似乎是个好方法,但缺点也比较明显:

首先,关闭和重开的浏览器窗口大小可能不同,用户可以明显看出这一过程,并且在一定程度上影响操作。

其次,同上,这是一个JavaScript方法。

 

我的练习中是用struts完成的Login/Logout过程,在loginSuccess.jsp页面中加入了<logic>标签:

<logic:notPresent name="helloForm">

           <logic:redirect page="/logout.do"></logic:redirect>

</logic:notPresent>

通过判断formBean是否存在决定是否跳转,结合上述的JavaScript方法即可以保证用户在注销后无论通过后退还是直接在地址栏输入业务页面地址都将无法返回页面。

分享到:
评论

相关推荐

    javascript 浏览器返回按钮事件

    2017-12-16 javascript 浏览器返回按钮事件 可弹出文本框,跳转链接(兼容没有测试)

    JavaScript阻止浏览器返回按钮的方法

    在总结上述内容之后,通过编写特定的JavaScript代码,我们可以实现阻止浏览器返回按钮的功能。然而,应当意识到这种做法可能带来的用户体验问题,并且要考虑到技术实现的限制。如果确定需要禁用返回按钮,务必考虑到...

    vue实现微信浏览器左上角返回按钮拦截功能

    主要介绍了vue实现微信浏览器左上角返回按钮拦截功能,本文通过实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    javascript实现禁用浏览器后退按钮

    ### JavaScript 实现禁用浏览器后退按钮的知识点详解 #### 一、背景介绍 在Web开发过程中,有时候出于用户体验或者安全性的考虑,开发者可能会选择禁用浏览器的后退按钮功能。例如,在某些登录验证后的页面,为了...

    微信浏览器左上角返回按钮监听的实现

    微信开发的时候,在公众号菜单中打开一个H5页面(如:个人中心),在这个页面上的一些操作,经过多次跳转后,点击左上角的返回按钮,发现会原封不动的返回至上一级页面。 即 公众号菜单-&gt;A-&gt;B-&gt;C,点击返回后,返回了B...

    全面考察“禁用浏览器后退按钮”

    首先,我们需要注意一个事实,那就是直接禁用浏览器的后退按钮在技术上是不可能的,因为这是浏览器的基本功能,由用户控制。但是,我们可以采取一些措施来模拟禁用效果,确保用户不会无意间通过后退按钮回到不应返回...

    javascript怎么禁用浏览器后退按钮

    当页面不希望被浏览器缓存时,也可以使用JavaScript来设置HTTP响应头,通过控制缓存来间接禁用后退按钮。使用`response.setHeader`方法设置`Cache-Control`为`no-cache`和`no-store`,同时设置`Expires`为0,并且...

    vue监听浏览器原生返回按钮,进行路由转跳操作

    但当用户在浏览器中点击返回按钮时,如果开发者没有处理好相关的逻辑,就可能会导致用户体验上的问题,比如页面跳转错误、数据不一致等。 这篇文章介绍了如何在Vue项目中监听浏览器的原生返回按钮事件,并根据不同...

    屏蔽浏览器的后退按钮

    1. **浏览器限制**:大多数现代浏览器(如Chrome、Firefox、Safari等)都有内置的安全机制,不允许网站通过JavaScript或其他方式直接禁用后退按钮的功能。 2. **用户体验**:屏蔽后退按钮会影响用户的正常浏览体验...

    JS针对浏览器窗口关闭事件的监听方法集锦

    在JavaScript中,监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一:适用于IE浏览器,仅在关闭时提示 ```javascript window....

    手机浏览器物理返回劫持,自定义点击返回的操作

    然而,有时候开发者为了特定的交互需求或者安全考虑,可能会选择劫持这一默认行为,即自定义点击返回按钮的操作。这在技术实现上通常涉及到前端框架Vue.js的使用。下面我们将深入探讨这一主题,包括其原理、实现方式...

    JavaScript 监控微信浏览器且自带返回按钮时间

    总的来说,JavaScript监控微信浏览器的返回按钮时间是为了提供更加灵活的导航控制,使开发者能够根据业务需求定制用户的浏览体验。通过合理利用`window.history`对象和事件监听,可以实现诸如页面跳转、数据同步等...

    js返回头部,js自动适应浏览器宽度 js自动判断宽高

    里面包含 js自动实时判断浏览器窗口大小(有拆分出来)的功能,灵活变通下可以变换成多种代码比如双联广告等。 代码小巧注释清晰容易修改……绝对是你想要的。 另外附上平时手机的多种常用js代码: js实现段落...

    js简洁客服和返回顶部右侧漂浮代码,有动画效果,兼容主流浏览器

    实现这个功能通常需要使用JavaScript来控制按钮的显示和隐藏,以及弹出对话框的动画效果。考虑到兼容性,代码需要确保在不同的浏览器如Chrome、Firefox、Safari和Edge等上都能正常工作。 2. **返回顶部功能**:这是...

    【JavaScript源代码】JavaScript实现返回顶部按钮案例.docx

    JavaScript 实现返回顶部按钮是一种常见的网页交互功能,它允许用户快速返回页面的顶部,提高用户体验。下面我们将详细探讨如何使用JavaScript来实现这个功能。 首先,我们需要创建返回顶部按钮的HTML结构,通常是...

    JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

    在标准的Web开发中,我们使用window.history对象来控制浏览器历史记录。通过window.history.go()或window.history.back()方法,可以在历史记录中前进或后退。但这些方法并不会触发popstate事件。popstate事件会在...

    苹果浏览器微信底部返回栏显示/隐藏的问题

    此段js代码完美解决 ; (function () { try { isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) if (fn.isIOS) { // window.history.pushState({}, title, #); document.addEventListener...

Global site tag (gtag.js) - Google Analytics