清除网页历史记录,屏蔽后退按钮!


Posted in Javascript onDecember 22, 2008

本文介绍网络上可找到的各种禁用浏览器后退按钮方案,分析它们各自的优缺点和适
用场合。
一、概述

曾经有许多人问起,“怎样才能‘禁用'浏览器的后退按钮?”,或者“怎样才能防止用户点击后退按钮返回以前浏
览过的页面?”在ASP论坛上,这个问题也是问得最多的问题之一。遗憾的是,答案非常简单:我们无法禁用浏览器的后退
按钮。

起先我对于居然有人想要禁用浏览器的后退按钮感到不可思议。后来,看到竟然有那么多的人想要禁用这个后退按
钮,我也就释然(想要禁用的只有后退按钮,不包括浏览器的前进按钮)。因为在默认情况下,用户提交表单之后可以通
过后退按钮返回表单页面(而不是使用“编辑”按钮!),然后再次编辑并提交表单向数据库插入新的记录。这是我们不
愿看到的。

因此我就决定要找出避免出现这种情况的方法。我访问了许多网站,参考了这些网站所介绍的各种实现方法。如果你
经常访问ASP编程网站,本文所介绍的部分内容你可能已经见到过。本文的任务是把各种可能的方法都介绍给大家,然后找
出最好的方法!
二、禁止缓存

在我找到的许多方案中,其中有一种建议禁止页面缓存。具体是使用服务器端脚本,如下所示:

<% 
Response.Buffer = True 
Response.ExpiresAbsolute = Now() - 1 
Response.Expires = 0 
Response.CacheControl = "no-cache" 
%>

这种方法非常有效!它强制浏览器重新访问服务器下载页面,而不是从缓存读取页面。使用这种方法时,编程者的主
要任务是创建一个会话级的变量,通过这个变量确定用户是否仍旧可以查看那个不适合通过后退按钮访问的页面。由于浏
览器不再缓存这个页面,当用户点击后退按钮时浏览器将重新下载该页面,此时程序就可以检查那个会话变量,看看是否
应该允许用户打开这个页面。

例如,假设我们有如下表单: 

<% 
Response.Buffer = True 
Response.ExpiresAbsolute = Now() - 1 
Response.Expires = 0 
Response.CacheControl = "no-cache" 
If Len(Session("FirstTimeToPage")) > 0 then 
&single; 用户已经访问过当前页面,现在是再次返回访问。 
&single; 清除会话变量,将用户重定向到登录页面。 
Session("FirstTimeToPage") = "" 
Response.Redirect "/Bar.asp" 
Response.End 
End If 
&single; 如果程序运行到这里,说明用户能够查看当前页面 
&single; 以下开始创建表单 
%> 
<form method=post action="SomePage.asp"> 
<input type=submit> 
</form>

我们借助会话变量FirstTimeToPage检查用户是否是第一次访问当前页面。如果不是第一次(即Session
("FirstTimeToPage")包含某个值),那么我们就清除会话变量的值,然后把用户重新定向到一个开始页面。这样,当表单
提交时(此时SompePage.asp被打开),我们必须赋予FirstTimeToPage一个值。即,在SomePage.asp中我们需要加上下面
的代码:
Session("FirstTimeToPage") = "NO"

这样,已经打开SomePage.asp的用户如果点击后退按钮,浏览器将重新请求服务器下载页面,服务器检查到Session
("FirstTimeToPage")包含了一个值,于是就清除Session("FirstTimeToPage"),并把用户重定向到其他页面。当然,所有
这一切都需要用户启用了Cookie,否则会话变量将是无效的。(有关该问题的更多说明,请参见For session variables
to work, must the Web visitor have cookies enabled?)

另外,我们也可以用客户端代码使浏览器不再缓存Web页面:

<html> 
<head> 
<meta http-equiv="Expires" CONTENT="0"> 
<meta http-equiv="Cache-Control" CONTENT="no-cache"> 
<meta http-equiv="Pragma" CONTENT="no-cache"> 
</head>

如果使用上面的方法强制浏览器不再缓存Web页面,必须注意以下几点:
只有在使用安全连接时“Pragma: no-cache”才防止浏览器缓存页面。对于不受安全保护的页面,“Pragma: no-cache”
被视为与“Expires: -1”相同,此时浏览器仍旧缓存页面,但把页面标记为立即过期。
在IE 4或5中,“Cache-Control”META HTTP-EQUIV标记将被忽略,不起作用。

在实际应用中我们可以加上所有这些代码。然而,由于这种方法不能适用于所有的浏览器,所以是不推荐使用的。但
如果是在Intranet环境下,管理员可以控制用户使用哪种浏览器,我想还是有人会使用这种方法。
三、其他方法

接下来我们要讨论的方法以后退按钮本身为中心,而不是浏览器缓存。这儿有一篇文章Rewiring the Back Button很
值得参考。不过我注意到,如果使用这种方法,虽然用户点击一下后退按钮时他不会看到以前输入数据的页面,但只要点
击两次就可以,这可不是我们希望的效果,因为很多时候,固执的用户总是能够找到绕过预防措施的办法。

另外一种禁用后退按钮的办法是用客户端JavaScript打开一个没有工具条的窗口,这使得用户很难返回前一页面,但
不是不可能。一种更安全但相当恼人的方法是,当表单提交时打开一个新的窗口,与此同时关闭表单所在的窗口。但我觉
得这种方法不值得认真考虑,因为我们总不能让用户每提交一个表单就打开一个新窗口。

那么,在那个我们不想让用户返回的页面是否也可以加入JavaScript代码呢?在这个页面中加入的JavaScript代码可
用来产生点击前进按钮的效果,这样也就抵消了用户点击后退按钮所产生的动作。用于实现该功能的JavaScript代码如下
所示:

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

同样地,这种方法虽然有效,但距离“最好的方法”还差得很远。后来我又看到有人建议用location.replace从一个
页面转到另一个页面。这种方法的原理是,用新页面的URL替换当前的历史纪录,这样浏览历史记录中就只有一个页面,后
退按钮永远不会变为可用。我想这可能正是许多人所寻求的方法,但这种方法仍旧不是任何情况下的最好方法。使用这种
方法的实例如下所示:
<A HREF="PageName.htm" onclick="javascript:location.replace(this.href);
event.returnValue=false; ">
禁止后退到本页面的链接</A>

试试下面这个链接:

禁止后退到本页面的链接!

这种方法的缺点在于:简单地运用Response.Redirect将不再有效,这是因为每次用户从一个页面转到另一个页面,
我们都必须用客户端代码清除location.history。另外还要注意,这种方法清除的是最后一个访问历史记录,而不是全部
的访问记录。

点击上面的链接,你将打开一个简单的HTML页面。再点击后退按钮,你可以看到这时打开的不是本页面,而是本页面
之前的页面!(当然,你必须在浏览器中启用了客户端JavaScript代码。)

经过一番仔细的寻寻觅觅之后,我发现仍旧无法找出真正能够完全禁用浏览器后退按钮的办法。所有这里介绍的方法
都能够在不同程度上、以不同的方式禁止用户返回前一页面,但它们都有各自的局限。由于不存在能够完全禁用后退按钮
的方法,所以最好的方案应该是:混合运用客户端脚本和服务器端脚本。

Javascript 相关文章推荐
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
使用js实现数据格式化
Dec 03 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
jQuery 各种浏览器下获得日期区别
Dec 22 #Javascript
JavaScript CSS菜单功能 改进版
Dec 20 #Javascript
JavaScript 字符串连接性能优化
Dec 20 #Javascript
js一组验证函数
Dec 20 #Javascript
flash javascript之间的通讯方法小结
Dec 20 #Javascript
javascript this用法小结
Dec 19 #Javascript
js 提交和设置表单的值
Dec 19 #Javascript
You might like
我用php+mysql写的留言本
2006/10/09 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
js实现登录与注册界面
2017/11/01 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
通用C#笔试题附答案
2016/11/26 面试题
护理自荐信
2013/10/22 职场文书
行政主管岗位职责
2013/11/18 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
洗车工岗位职责
2014/03/15 职场文书
关于安全演讲稿
2014/05/09 职场文书
交通志愿者活动总结
2014/06/27 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
python实现Nao机器人的单目测距
2021/09/04 Python
微信小程序实现轮播图指示器
2022/06/25 Javascript