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


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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
javascript 图片上传预览-兼容标准
Jun 01 Javascript
在模板页面的js使用办法
Apr 01 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
php smarty的预保留变量总结
2008/12/04 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
js获取单选按钮的数据
2006/11/27 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
python中import与from方法总结(推荐)
2019/03/21 Python
Python OS模块实例详解
2019/04/15 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
房屋出租委托书格式
2014/09/23 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫