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


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 相关文章推荐
javascript 子窗体父窗体相互传值方法
May 31 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
js中function()使用方法
Dec 24 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
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字符串分割函数explode的实例代码
2013/02/07 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python制作websocket服务器实例分享
2016/11/20 Python
Python_LDA实现方法详解
2017/10/25 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
python输入中文的实例方法
2020/09/14 Python
英国网上电器商店:Electricshop
2020/03/15 全球购物
自荐书4要点
2014/01/25 职场文书
民族团结先进个人材料
2014/02/05 职场文书
管理失职检讨书
2015/05/05 职场文书
地道战观后感500字
2015/06/04 职场文书
让生命充满爱观后感
2015/06/08 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
pandas求平均数和中位数的方法实例
2021/08/04 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android