监听浏览器返回、后退、上一页按钮事件方法

一.同一网站内

1.监听返回事件

window.addEventListener("popstate", function (e) {
	alert("我监听到了浏览器的返回按钮事件啦");//根据⾃⼰的需求实现⾃⼰的功能
}, false);

2.增加⼀个本页URL

虽然我们监听到了后退事件，但是页⾯还是会返回上⼀个页⾯，所以我们需要使⽤pushState增加⼀个本页的url,

function pushHistory() {
	var state = {
		title: "title",
		url: "#"
	};
	window.history.pushState(state, "title", "#");
}

3.完整代码

$(function () {
	pushHistory();
	window.addEventListener("popstate", function (e) {
		alert("我监听到了浏览器的返回按钮事件啦");//根据⾃⼰的需求实现⾃⼰的功能
	}, false);
	function pushHistory() {
		var state = {
			title: "title",
			url: "#"
		};
		window.history.pushState(state, "title", "#");
	}
}

const popStateHandle = function () {
	//处理逻辑
}

onMounted(() => {
	window.history.pushState(null, null, '')
	window.addEventListener('popstate', popStateHandle, false)
})
onUnmounted(() => {
	//销毁
	window.removeEventListener('popstate', popStateHandle)
})

二.不同网站内

1.需求

网站A-页面a.page 转到网站B -页面b.page
在b.page点击浏览器右上角返回让他监听到并且跳转到B网站的b_c.page

2.问题

popstate事件监听不管用，因为history.state没有数据，直接返回至a.page

3解决方案

1.在B网站加一个空白的页面b_empty.page放入上面的监听代码
2.A网站的a.page跳转到B网站的b_empty.page
3.b_empty.page 自动跳转到b.page
这样在b.page 返回b_empty.page的时候就能监听到了

参考文章

https://blog.csdn.net/m0_55969466/article/details/125189282

https://blog.csdn.net/qq_43383334/article/details/126642348