禁用浏览器后退按钮

基本上是3个solution:

1).设置网页过期(服务器端)

2).javascript:window.history(客户端)

3).对于键盘的backspace.通过window.event来过滤,当然要考虑的是对于Input控件,要保持删除的功能。

<script type="text/javascript">

function backspace() {

if (event.keyCode == 8 && event.srcElement.tagName != "INPUT" && event.srcElement.type != "text")

event.returnValue = false;

}

if (navigator.appName == "Microsoft Internet Explorer") {

window.history.forward(1);

}

else // if it is Mozilla than

{

window.history.forward(-1);

}

</script>

下面是我的尝试:

1) 先来说对于,网页过期的:

网页一旦过期,意味着每次页面的刷新,需要重新从服务器端获取所有的网页资源。这时候如果通过浏览器的后退按钮,进行后退,就会reload整个页面,相当于一个get request.因此对于相应页面会执行 OnLoad事件,以及OnLoadCompleted事件

若在OnLoadCompleted事件页面没能获取到所需要的资源,将会显示网页已过期的错误。但是无论讲*****怎样添加到页面中,都不能重现网页已过期的错误,

2) 对于页面可客户端的OnLoad执行脚本: Windows.History.Forward(1),对于这个方法别人说不完美,但没有说处理理由。我相说的是,对于直接点击后腿按钮的情况,Window.History.Forward(1)几乎可以Cover 大多数场景,只是一个奇怪的事情当所有的后退经过一个页面的时候,就会停止,不会继续forward 到原来页面。原以为这就是我们的解决500 errors的钥匙,但是一次不经意的聊天,让我们想起了,如果不是点击后腿按钮,而是选择HIstory List中网页,又该如何去处理? 为了解决这一问题,我有2个想法

a)获取选择HistoryList中页面的index,然后Windows.History.Froward(index), 查阅资料,最后在msdn上看到的解释是,处于安全的因素microsoft 不会暴露Window.history对象中url 实际地址和Index,也就是说无法得到HistoryList 网页的具体信息。

b)  记录后退之前页面的URL,然后直接用Windows.Location.Href,记录后退之前的url这个不难,<%= %> <%#%>, 均可做到,但是问题来了,如何区分网页的get reque是由于后退造成的,似乎有一个无解!

不过在探索a,b 的时候,想到2个问题

1)关于Windows..history.forward();如果windows.history List中只有5个页面,但是我把Windows..history.forward(100),结果会是如何。

2)如果我在history list选择一个距离当前页面距离不是1的页面 Windows..history.forward(1),会如何工作?

解释:

1)其实Windows..history.forward(100)和Windows..history.forward(1)的效果是一样的.

那Windows..history.forward(1),究竟是如何工作的,通过http watch

可以看到,Windows..history.forward(1),总是会将windows.history.list里买你的所有页面走完,直到页面再也不能往前,对于windows.history.list.length=5的时候,无论在哪个页面发起history,forward(1),都会走到当前页面。因此是可以很好地阻止页面后退,缺点是带来了很多的额外的http request,因为需要一个页面一个页面后退。

另外一个奇怪的问题:在我们的一个application里面我发现,windows.history.forward(1),会走到某个页面,停止。以至于在那个页面之后的页面,就无法实现组织后退的功能。我偶然发现对于windows.history.forward(1)页面居然会执行OnInit ,Onload ,OnloadComplete这些事件,我很费解,为什么windows.history.forward会触发服务器端事件呢,然来是因为在基类里面设置了缓存过期,这样每次需要从server上取页面资源 。

因此页面过期和windows.history.forward是不可以一起使用的

为解决浏览器后退按钮禁用的方法,在网上搜索了几个方法,虽然可用但是没有太完美的...

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>

这种方法用链接页面的URL替换了当前的历史纪录,这样浏览历史记录中就不会有本页面,后退按钮将不能回到本页面。用户点击“Logout”链接注销并执行新页面,这时当用户点击“后退”按钮将不能回到本页,而是回到在本页之前打开的那个页面。

也就是说,这种方法清除的是最后一个访问历史记录,而不是全部的访问记录,这是该方法的一个缺点,当然可以在每一个业务页面都添加这段代码作为保护。另外,和上一种方法相同,当用户端禁用了JavaScript之后即失效。

3、

<script language="JavaScript">

function logout()

{

window.close(true);

window.open("logout.do");

}

</script>

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

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

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

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

以上方法都是针对“后退”按钮作出的反应,客户端浏览器需要打开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>标签实现重新定向。

以上各种方法都有一定的局限,虽然是一个小问题,可是考虑到页面安全的因素,却不得不重视。

时间: 2024-10-17 16:19:51

禁用浏览器后退按钮的相关文章

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

1. 复制代码 代码如下: <script language="JavaScript"> javascript:window.history.forward(1); </script> 利用JS产生一个“前进”的动作,以抵消后退功能,这种方法应该是最简洁的,并且不需要考虑用户连点两次或多次“后退”的情况,缺点是当用户端禁用了JavaScript之后即失效. 2. 复制代码 代码如下: <A HREF="logout.do" onclic

防止页面后退(使浏览器后退按钮失效)

防止页面后退(使浏览器后退按钮失效) 原理:用新页面的URL替换当前的历史纪录,这样浏览历史记录中就只有一个页面,后退按钮永远失效. 注:history.go和history.back(包括用户按浏览器历史前进后退按钮)触发, 页面由于使用pushState修改了history),会触发popstate事件.     [代码如下]       注:直接放在不想后退跳转的页面即可! 方法一:       <script type="text/javascript">     

L--怎样让用户点击浏览器后退按钮刷新后退页面的验证码

介绍 项目需要,怎样让用户点击浏览器后退按钮刷新后退页面的验证码,通过cookie来解决 方法一(通过设置前台html)(失败) 本想通过控制html的http-equiv属性来解决问题,如下 http-equiv属性 1.<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80"> 和 <meta http-equiv="Content-Lan

如何屏蔽掉浏览器后退按钮的几个解决办法

Q311 How do I disable the "Back" button of a browser? You are here: irt.org | FAQ | JavaScript | History | Q311 [ previous next ] Easy answer - you can't. Longer answer - you cannot totally remove the ability for the user to go back to the previ

[转] 利用js实现 禁用浏览器后退

[From] http://blog.csdn.net/zc474235918/article/details/53138553 现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作.所以在有些页面上,适当的禁用浏览器的后退,是可以提高很大的用户体验.在网上查,可以查到很多js禁用后退的材料. 用的多的方法如下: 1.回退后,产生一个前进事件. 这种方式,不算是一个满意的解决方式.因为用户能体验到,界面的后退

利用js实现 禁用浏览器后退

现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作.        所以在有些页面上,适当的禁用浏览器的后退,是可以提高很大的用户体验.        在网上查,可以查到很多js禁用后退的材料. 1.回退后,产生一个前进事件. 这种方式,不算是一个满意的解决方式.因为用户能体验到,界面的后退,前进.体验不好. <script language="JavaScript"> javascr

根据浏览器history模拟浏览器后退按钮显隐问题

场景:在APP页面开发中,有一个需求,做一个返回按钮,实现的功能和浏览器的后退按钮相同. 措施:具体思路如下: 1.开始打开页面时,浏览器的history.length为1,按钮隐藏:     2.当history.length>1时,点击按钮执行 history.go(-1): 3.后退到历史记录栈中第一帧时,按钮隐藏.出于浏览器安全性考虑,history中没有给出属性判断其当前页的位置,所以,在开始打开页面,处于第一帧时,在当前url中添加参数,按钮点击事件触发时,根据该参数可判断是否是第一

多页面网站禁用浏览器后退键

如标题所说,本文提供的方法适用于多页面网站,如SPA单页面应用等不适用. 利用window.onpopstate和window.history.pushState 控制浏览器后退键失效,下面说一下如何实现. 1.在你需要禁止浏览器后退键的页面上加上下面的代码: <script> $(document).ready(function(){ //判断当前浏览器是否支持history和pushState,据我测试当前大部分浏览器都支持 if(window.history && win

JQuery 阻止浏览器后退按钮

方案一(个人试过360,谷歌,QQ浏览器都可以,方案二有的浏览器还是可以后退,避免万无一失最好使用方案一) <script type="text/javascript"> function ban() { if (window.history && window.history.pushState) { $(window).on('popstate', function () { window.history.pushState('forward', nul