如何通过 JS 来修改浏览器地址

发表于 | 更新于: | 分类于
阿里云产品限时红包，最高 ￥1888 元，立即领取。

今天看到 jsdig.com 上的效果，发现随着输入的变化，浏览器地址栏中的地址会发生变化，很好奇。效果如下图：

jsdig

所以找了些资料。

现在的浏览器，可以在不刷新页面的情况下修改浏览器 URL。在浏览过程中，可以将浏览历史储存起来，当点击浏览器后退按钮的时候，还可以从浏览历史上获得回退的信息。主要的工作原理呢，是通过 History 对象的 pushState() 实现的。

直接上测试的代码：

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
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
  <div>
  	<label id="counter">点击按钮查看变化</label><br/>
  	<input type="button" value="点击" onclick="update()" />
  </div>
  <script>
  	var counter = document.getElementById("counter");
   	var i = 0;

  	function update() {
  		var stateObject = {id: i};
		var title = "Wow Title "+i;
		var newUrl = "?count="+i;
		history.pushState(stateObject, title, newUrl);
		counter.innerHTML = window.location.href;
		i++;
  	}

	window.addEventListener('popstate', function(event) {
	  readState(event.state);
	});

	function readState(data){
	  counter.innerHTML = data.id;
	}
  </script>
</body>
</html>

直接把上面的代码保存成静态网页，然后放到 web 服务器下访问就可以了。具体画面如下：

如何通过 JS 来修改浏览器地址

参考：

Manipulating browser URL using Javascript without refreshing the page