javascript - 对 window.onhashchange 未检测到的 URL 哈希更改执行函数

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 键。

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

有没有办法在 URL 中的哈希更改时执行函数，即使它没有通过在地址栏中键入或单击“返回”按钮进行更改？例如，location.hash每次用户从一张幻灯片更改为另一张幻灯片时都会发生更改——有没有办法监听更改location.hash？

score 1 · Accepted Answer

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

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

这就是一个人需要做的。

1 回答 1