使用hash来控制浏览器的前进与后退状态

发表于

问题

在web开发的过程中，我们或多或少都会遇到和浏览器前进或者后退事件的问题。像ajax的表单的提交，当用户填完表单后条转到另外页面时，退回上一个页面会看到自己填写的东西都变成了空白。或者我们想让用户进入另外一个页面之后，不要在用浏览器回退回之前的页面。然而，浏览器并没有暴露类似回退以及前进这样的事件接口给我们，所以，这里我们打算用html5规范中最新出的hash值来解决这样的麻烦。

实现

先看一段实现的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!-- 
* html使用hash来控制页面的进退
* onhashchange事件，这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。
-->

<!DOCTYPE HTML>
<html>
<head>
	<title>浏览器Hash历史记录</title>
</head>
<body>
	test
</body>

<script type="text/javascript">
	location.hash = "hello";
	setTimeout(function(){
		window.addEventListener('hashchange',function(){
			console.log("Hash Changed");
		},false);
		location.hash = "world";
	},2000);
</script>
</html>

我们可以看到浏览器上地址栏上的地址由原来”#hello”变成”#world”而且控制台也成功的输出了”Hash Changed”的字样。我们此时可以按下浏览器的回退按钮。地址成功的退回到了”#hello”页面。

而当我们按下回退按钮的时候，hashchange事件也是监听到了浏览器hash值的改变，于是第二次的输出了”Hash Changed”字样。

一些适用场景

由于浏览器并没有暴露其后退前进的事件方法给我们（如果暴露了是很危险的，如果一些恶意网站利用该特点，就可能导致用户无限跳转页面），像我们之前所谈到的，如果我们不希望用户回到上一个页面（像是那种好不容易填完的表单，或者数据由ajax获取，如果回退，可能造成请求丢失而导致页面空白）。那么我们完全可以用监听页面hash值的方式，使其跳转到指定的页面即可了。

只是需要注意的是，这是一个新加入的h5方法，需要在IE8以上的环境中适用。