javascript - 检测或捕获 hashbang/querystring 更改为相同的 href 目标

Question

我注意到有几个网站，如果我创建共享同一目标的多个链接，该网站实际上不会重新加载请求，而是捕获链接并处理它，或者通过将其加载到其内的选项卡中应用程序，或者更改页面内的元素，再次...所有这些都无需完全重新加载 URL 请求。

如何在我的页面中检测到这一点？

例如，我想处理来自外部链接的多个链接，如下所示

<a href="http://192.168.1.10/index.php?p=1#/tag/ABC-0021" target="myapp">0021</a>           
<a href="http://192.168.1.10/index.php?p=1#/tag/ABC-0031" target="myapp">0031</a>
<a href="http://192.168.1.10/index.php?p=1#/tag/ABC-0012" target="myapp">0012</a>

现在，每次我单击其中一个链接时，我的整个应用程序/页面都会在该目标的浏览器选项卡中刷新。有人知道一种方法可以防止这种情况发生，以便我可以适本地处理它吗？

编辑:Google 音乐执行此操作 - 尝试单击链接，打开选​​项卡后，将该选项卡移动到屏幕的另一个监视器/区域。选择另一个链接，会注意到 Google 音乐的内容发生了变化，但并没有完全刷新整个应用程序。 https://jsfiddle.net/jonemzke/

Edit2:我想它与 window.onbeforeunload 或 popstate 更改有关，但是我找不到此场景的具体代码示例。

Answer 1

有 window.onhashchange 来实现

    window.onhashchange = function() {
        document.getElementById("hash").innerText =  window.location.hash;
    };

<a href = "#no_refresh">No Refresh</a>
<a href = "#still_no_refresh">Still no Refresh</a>
<br />
Current hash<div id = "hash"></div>

https://developer.mozilla.org/en/docs/Web/API/WindowEventHandlers/onhashchange