当前位置：首页 > article >正文

history对象，当前url添加参数且不刷新页面

article 2025/9/2 3:21:45

文章目录

- - - - 1.window.history.back()
      - 2.window.history.forward()
      - 3.window.history.go() 跳转到history中的指定的点
      - 4.添加和修改历史记录中的数目
      - 4.1 pushState()
        4.2 replaceState()

这周突然想起来在url路径后面添加参数且不刷新页面的知识点，我好像之前都没注意到，突然想看看，所以看的时候就看了history对象。

History对象提供了对浏览器的会话历史的访问，允许在用户浏览历史中向前向后跳转，同时——从HTML5开始提供了对history栈中内容的操作。

1.window.history.back()

window.history.back()

在history中向后跳转，和用户点击浏览器的回退按钮效果相同

2.window.history.forward()

window.history.forward()

在history中向前跳转，和用户点击浏览器的前进按钮

3.window.history.go() 跳转到history中的指定的点

通过与当前页面相对位置来标志（当前页面的相对位置标志为0）

window.history.go(-1) //向前移动了一个页面，相当于window.history.back()
window.history.go(1) //向前移动了一个页面，相当于window.history.forward()

所以，可以传递参数为2，并向前移动2个页面。（可以通过window.history.length来查看历史堆栈中页面的数量）

4.添加和修改历史记录中的数目

html5中引入了history.pushState()和history.replaceState()方法，分别可以添加和修改历史记录条目

4.1 pushState()

当前页面原本是http://127.0.0.1:5500/test.html

history.pushState({ page: 1 }, 'title 1', '?page=1')

操作后变为http://127.0.0.1:5500/test.html?page=1

这个操作之后会添加浏览器历史记录。页面可以回退。

4.2 replaceState()

这个操作同上，操作之后不添加浏览器历史记录，页面不能回退。

5.实现js更改url参数，但不刷新或重载页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#change {width: 20px;height: 20px;background-color: aquamarine;}#change2 {width: 20px;height: 20px;background-color: rgb(146, 127, 255);}#change1 {width: 20px;height: 20px;background-color: rgb(255, 255, 127);}
</style><body><div id="change" onclick="updateUrl('number','2') "></div><div id="change2" onclick="updateUrl('number1','2') "></div><div id="change1" onclick="updateUrl('number1','3') "></div>
</body>
<script type="text/javascript">function updateUrl(key, value) {var newurl = updateNewUrl(key, value)//向当前url添加参数，有历史记录window.history.pushState({path: newurl}, '', newurl);// 向当前url添加参数，没有历史记录// window.history.replaceState()({//     path: newurl// }, '', newurl);}function updateNewUrl(key, value) {var uri = window.location.hrefif (!value) {return uri;}var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");var separator = uri.indexOf('?') !== -1 ? "&" : "?";if (uri.match(re)) {return uri.replace(re, '$1' + key + "=" + value + '$2');}else {return uri + separator + key + "=" + value;}}
</script></html>