對 URL hash 未檢測到的更改執行 function

Question

我正在使用 xaringan 幻燈片； xaringan 基於 remark.js。 我想實現一個在每次幻燈片更改時觸發的 Javascript function。 （function 可以是任何東西；在我的情況下，它會在幻燈片更改時將“演示者注釋”滾動到其div的頂部。）

remark.js 幻燈片是 HTML 文件。 在文件的 URL 中，每張幻燈片由 hash 標記后的數字表示：您有“mySlides.html#1”、“mySlides.html#2”等。 所以看起來我可以用window.onhashchange實現我想要的行為：

function myFunc() {
  console.log("Triggered myFunc()!")
}
window.onhashchange = myFunc;  

當用戶使用瀏覽器中的“后退”或“前進”按鈕更改幻燈片時，此代碼有效。 當他在地址欄中輸入更改時，它也可以工作。 例如，如果他在地址欄中看到“mySlides.html#1”，則刪除“1”，將其替換為“2”，然后按 Enter 鍵。

但是沒有人以這些方式更改幻燈片。 相反，他們通過在平板電腦上滑動、滾動鼠標滾輪或按左右箭頭鍵來更改幻燈片。 所有這些快捷方式都會更改地址欄中顯示的幻燈片和 hash。 但他們都沒有觸發window.onhashchange 。

有沒有辦法在 URL 中的 hash 發生變化時執行 function，即使它沒有通過在地址欄中鍵入或單擊“返回”按鈕進行更改？ 例如，每次用戶從一張幻燈片切換到另一張幻燈片時， location.hash都會發生變化——有沒有辦法監聽location.hash的變化？

Answer 1

根據 charlietfl 的評論，remark.js 帶有易於觸發的幻燈片更改事件：

function myFunc() {
  console.log("Triggered myFunc()!")
}
slideshow.on('showSlide', myFunc);

這就是一個人需要做的。