在老的jqury项目中通常实现SPA一般都采用hash值变化来进行监听，但是有的项目中我们也想采用改变URL参数来进行监听，一般我们使用window.history.pushState方法来改变url参数；
为了在使用 window.history.pushState 或 window.history.replaceState 后能够检测到浏览器的后退按钮操作，可以通过监听 popstate 事件来处理浏览器导航历史变化。popstate 事件在用户点击浏览器的后退或前进按钮时触发。
说明：
1、监听浏览器地址URL的参数变化；
2、点击浏览器前进和后退按钮的时候也可触发监听事件；
下面是示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="changeUrl()">改变URL参数</button>
<script>
/**
* 改变url参数
* 随便找个简单的例子2个参数p1和p2
* */
function changeUrl() {
let random = Math.floor(Math.random() * 100);
let newP = `p1=${random}&p2=${random * 2}`;
updateUrlWithNewParams(newP);
}
// 注册修改 pushState 和 replaceState 以触发自定义事件
(function (history) {
const pushState = history.pushState;
const replaceState = history.replaceState;
history.pushState = function (state, title, url) {
const result = pushState.apply(history, arguments);
const urlChangeEvent = new Event(urlChangeEventType);
window.dispatchEvent(urlChangeEvent);
return result;
};
history.replaceState = function (state, title, url) {
const result = replaceState.apply(history, arguments);
const urlChangeEvent = new Event(urlChangeEventType);
window.dispatchEvent(urlChangeEvent);
return result;
};
})(window.history);
// 自定义事件类型
const urlChangeEventType = "urlChange";
// 监听 popstate 事件以处理浏览器后退和前进操作
window.addEventListener("popstate", function (event) {
const urlChangeEvent = new Event(urlChangeEventType);
window.dispatchEvent(urlChangeEvent);
});
// 监听自定义的 URL 变化事件
window.addEventListener(urlChangeEventType, function (event) {
// 在这里处理 URL 变化后的逻辑
pageInit();
});
// 更新url参数
function updateUrlWithNewParams(newParams) {
// 获取当前URL
let url = window.location.href;
let baseUrl = url.split("?")[0]; // 基础URL
let newParamsObj = new URLSearchParams(newParams); // 新的参数对象
// 构造新的URL
let newUrl = `${baseUrl}?${newParamsObj.toString()}`;
// 使用history.pushState更新URL，不重新加载页面
window.history.pushState({ path: newUrl }, "", newUrl);
}
function getUrlParams(url = window.location.href) {
const params = {};
// 使用 URL 构造函数解析 URL
const urlObj = new URL(url);
// 获取查询字符串
const queryString = urlObj.search;
// 使用 URLSearchParams 解析查询字符串
const urlSearchParams = new URLSearchParams(queryString);
// 遍历所有参数并添加到对象
for (const [key, value] of urlSearchParams.entries()) {
params[key] = value;
}
return params;
}
function pageInit() {
alert("修改url了");
console.log("新参数", getUrlParams());
}
</script>
</body>
</html>
标签：浏览器,URL,url,window,const,SPA,pushState,history From： https://www.cnblogs.com/tymyj/p/18222608