usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/frontend/src/boot/common.ts
View File

@ -106,6 +106,11 @@ export async function common(createVue: () => Promise<App<Element>>) {
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 => {
if (path !== null) window.location.href = path;

31
packages/frontend/src/components/MkFolderPage.vue
View File

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