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


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 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
javascript操作excel生成报表示例
May 08 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
详解React路由传参方法汇总记录
Nov 29 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
加强版phplib的DB类
2008/03/31 PHP
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
php分页函数完整实例代码
2014/09/22 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
调试Python程序代码的几种方法总结
2015/04/28 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
python实现的分层随机抽样案例
2020/02/25 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
Python绘制数码晶体管日期
2021/02/19 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js