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

Posted 2023-03-08

【中文标题】对 window.onhashchange 未检测到的 URL 哈希更改执行函数

【英文标题】：execute function on URL hash change that isn't detected by window.onhashchange

【发布时间】：2021-06-24 05:30:11

【问题描述】：

我正在使用 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 的变化？

【问题讨论】：

从未使用过，但快速查看文档显示有幻灯片更改事件可以收听github.com/gnab/remark/wiki/Configuration#api

做到了-谢谢。我现在会发布答案。

【参考方案1】：

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

function myFunc() 
  console.log("Triggered myFunc()!")

slideshow.on('showSlide', myFunc);

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