在 URL 未被 window.onhashchange 检测到的哈希更改上执行函数

Question

我正在使用 xaringan 载玻片； xaringan 基于 remark.js。我想实现一个 Javascript 函数，该函数在每次幻灯片更改时触发。（该功能可以是任何东西；在我的例子中，它会在幻灯片更改时将“演示者注释”滚动到 div 的顶部。）

remark.js 个幻灯片是 HTML 个文件。在文件的 URL 中，每张幻灯片都由井号后面的数字表示：您有“mySlides.html#1”、“mySlides.html#2”，等等。所以看起来我可以用 window.onhashchange:

实现我想要的行为

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

当用户使用浏览器中的“后退”或“前进”按钮更改幻灯片时，此代码有效。当他在地址栏中键入更改时，它也会起作用。例如，如果他在地址栏中看到“mySlides.html#1”，则删除“1”，将其替换为“2”，然后按 Enter。

但是没有人以这些方式更改幻灯片。相反，他们通过在平板电脑上滑动、滚动鼠标滚轮或按左右箭头键来更换幻灯片。所有这些快捷方式都会更改地址栏中显示的幻灯片和散列。但是 none 触发了 window.onhashchange.

有没有一种方法可以在 URL 中的散列发生变化时执行函数，即使它没有通过在地址栏中键入内容或单击“后退”按钮进行更改？例如，每次用户从一张幻灯片切换到另一张幻灯片时，location.hash 都会发生变化——有没有办法监听 location.hash 的变化？

Answer 1

根据 charlietfl 的评论，remark.js 附带了易于触发的幻灯片更改事件：

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

这是一个人需要做的一切。

execute function on URL hash change that isn't detected by window.onhashchange