From fbde884004f37d84873d8e0731203833b4a2193d Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 27 Oct 2024 03:05:58 +0800
Subject: [PATCH] fix(iframe-drawer): correct URL location when opening in a
 new tab (#1068)

---
 src/components/IframeDrawer.vue  | 34 +++++++++++++++++---------------
 src/contentScripts/views/App.vue | 17 +++++++++++++++-
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/components/IframeDrawer.vue b/src/components/IframeDrawer.vue
index a2c6b172..0eafaf55 100644
--- a/src/components/IframeDrawer.vue
+++ b/src/components/IframeDrawer.vue
@@ -26,9 +26,9 @@ const inIframe = computed((): boolean => {
 })
 
 useEventListener(window, 'popstate', updateIframeUrl)
-nextTick(() => {
-  useEventListener(iframeRef.value?.contentWindow, 'pushstate', updateCurrentUrl)
-})
+// nextTick(() => {
+//   useEventListener(iframeRef.value?.contentWindow, 'pushstate', updateCurrentUrl)
+// })
 
 onMounted(async () => {
   history.pushState(null, '', props.url)
@@ -46,17 +46,17 @@ onUnmounted(() => {
   history.replaceState(null, '', 'https://www.bilibili.com')
 })
 
-function updateCurrentUrl() {
-  if (iframeRef.value?.contentWindow) {
-    try {
-      currentUrl.value = iframeRef.value.contentWindow.location.href
-      history.pushState(null, '', currentUrl.value)
-    }
-    catch (error) {
-      console.error('Unable to access iframe URL:', error)
-    }
-  }
-}
+// function updateCurrentUrl() {
+//   if (iframeRef.value?.contentWindow) {
+//     try {
+//       currentUrl.value = iframeRef.value.contentWindow.location.href.replace(/\/$/, '')
+//       history.pushState(null, '', currentUrl.value.replace(/\/$/, ''))
+//     }
+//     catch (error) {
+//       console.error('Unable to access iframe URL:', error)
+//     }
+//   }
+// }
 
 async function updateIframeUrl() {
   if (isHomePage()) {
@@ -66,7 +66,7 @@ async function updateIframeUrl() {
   await nextTick()
 
   if (iframeRef.value?.contentWindow) {
-    iframeRef.value.contentWindow.location.replace(location.href)
+    iframeRef.value.contentWindow.location.replace(location.href.replace(/\/$/, ''))
   }
 }
 
@@ -98,7 +98,9 @@ async function releaseIframeResources() {
 }
 
 function handleOpenInNewTab() {
-  window.open(props.url, '_blank')
+  // window.open(props.url, '_blank')
+  if (iframeRef.value)
+    window.open(iframeRef.value.contentWindow?.location.href.replace(/\/$/, ''), '_blank')
 }
 
 const isEscPressed = ref<boolean>(false)
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index e3366362..35e324ab 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useThrottleFn, useToggle } from '@vueuse/core'
+import { useEventListener, useThrottleFn, useToggle } from '@vueuse/core'
 import type { Ref } from 'vue'
 
 import type { BewlyAppProvider } from '~/composables/useAppProvider'
@@ -181,6 +181,21 @@ async function haveScrollbar() {
   return scrollHeight > window.innerHeight
 }
 
+// When opening a video in drawer mode, listen for changes to the drawer's inner iframe url.
+// When the iframe's url changes, update the parent url to match the iframe's url.
+const beforeUrl = ref<string>(location.href.replace(/\/$/, ''))
+if (inIframe.value) {
+  useEventListener(window, 'pushstate', handleIframeUrlChange)
+  useEventListener(window, 'click', handleIframeUrlChange)
+
+  function handleIframeUrlChange() {
+    if (beforeUrl.value.replace(/\/$/, '') !== parent.location.href.replace(/\/$/, '')) {
+      parent.history.pushState(null, '', location.href.replace(/\/$/, ''))
+    }
+    beforeUrl.value = location.href.replace(/\/$/, '')
+  }
+}
+
 provide<BewlyAppProvider>('BEWLY_APP', {
   activatedPage,
   mainAppRef,