Refine browser back button implementation using hash-based approach

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot] 2025-09-16 03:46:10 +00:00
parent a1c93d9b25
commit fb864ecd6c
2 changed files with 18 additions and 20 deletions

View File

@ -106,6 +106,11 @@ export async function common(createVue: () => Promise<App<Element>>) {
window.history.replaceState(null, '', window.location.href.replace('#pswp', '')); window.history.replaceState(null, '', window.location.href.replace('#pswp', ''));
} }
// URLに#folder-を含む場合は取り除くFolderPageView用
if (window.location.hash.startsWith('#folder-')) {
window.history.replaceState(null, '', window.location.href.replace(window.location.hash, ''));
}
// 一斉リロード // 一斉リロード
reloadChannel.addEventListener('message', path => { reloadChannel.addEventListener('message', path => {
if (path !== null) window.location.href = path; if (path !== null) window.location.href = path;

View File

@ -43,44 +43,37 @@ const emit = defineEmits<{
const zIndex = claimZIndex('low'); const zIndex = claimZIndex('low');
const showing = ref(true); const showing = ref(true);
const closedByBackButton = ref(false);
function closePage() { function closePage() {
showing.value = false; showing.value = false;
} }
function onClosed() { function onClosed() {
// Don't manipulate history if we're closing due to back button // When closing, remove our history entry if we're still on our hash
// The browser has already handled the history navigation if (window.location.hash === `#folder-${props.pageId}`) {
if (!closedByBackButton.value) {
// When closing normally (via close button), go back to remove our history entry
window.history.back(); window.history.back();
} }
emit('closed'); emit('closed');
} }
function handlePopState() { const popstateHandler = (): void => {
// User pressed back button - close the folder page // If the hash is no longer our folder hash, close the page
closedByBackButton.value = true; if (window.location.hash !== `#folder-${props.pageId}`) {
closePage(); closePage();
} }
};
onMounted(() => { onMounted(() => {
// Push a new history state when the folder page opens // Push a new history state with a unique hash when the folder page opens
const folderPageState = { window.history.pushState(null, '', `#folder-${props.pageId}`);
folderPageId: props.pageId,
isFolderPage: true,
};
window.history.pushState(folderPageState, '', window.location.href); // Listen for popstate events (browser back button)
window.addEventListener('popstate', popstateHandler);
// Listen for popstate events (browser back button) with high priority
window.addEventListener('popstate', handlePopState, true);
}); });
onUnmounted(() => { onUnmounted(() => {
// Clean up the event listener // Clean up the event listener
window.removeEventListener('popstate', handlePopState, true); window.removeEventListener('popstate', popstateHandler);
}); });
</script> </script>