ブラウザーの「戻る」、「戻る」、「前ページ」ボタンのイベント メソッドをリッスンします。

1. 同一ウェブサイト内

1. リターンイベントをリッスンする

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

2. このページのURLを追加します

back イベントをリッスンしましたが、ページはまだ前のページに戻るため、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)
})

2. さまざまなウェブサイトで

1. 需要

ウェブサイト A-ページ a.page ウェブサイト B-ページ b.page に移動します。 b.page でブラウザの右上隅をクリックして戻り、監視させてウェブサイト B の b_c.page にジャンプします。

2. 問題点

History.state にはデータがなく、直接 a.page に戻るため、popstate イベントの監視は機能しません。

3つの解決策

1. Web サイト B に空のページ b_empty.page を追加し、上記の監視コードを配置します。 2. Web サイト A の A.page が Web サイト B の b_empty.page にジャンプします。 3. b_empty.page は自動的に b.page にジャンプします。 b_empty.page が返されたときにページを監視できます

---

参考記事

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

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