使用哈希导航时如何检测重定向到同一地址？答案

【问题标题】：How to detect redirection to the same address when using hash navigation?使用哈希导航时如何检测重定向到同一地址？
【发布时间】：2017-05-10 17:32:54
【问题描述】：

This question 有点像我在想的，但没有答案。

我已使用以下代码在我的应用程序中成功实现哈希导航：

$(window).on('hashchange', function () {
    loadContent(location.hash.slice(1));
}).trigger('hashchange');

我使用此事件通过 Ajax 从服务器下载部分 HTML 内容，当浏览器检测到地址栏中的哈希值发生更改时，它会被调用。地址如下所示：

https://www.mywebsite.com/#/account/login

问题是，当链接相同时，它不会触发 hashchange 事件（原因很明显）。我需要调用函数loadContent来刷新页面。

例如，在我实现哈希导航之前，如果用户想放弃他对页面所做的所有更改，他只需单击系统菜单中的相同链接，或者单击地址栏并回车。然后，浏览器将重定向到同一页面并删除所有更改。

但现在，我无法检测到这一点。我可以做些什么来检测这些命令并调用我的loadContent(location.hash.slice(1)); 函数？

【问题讨论】：

标签： javascript jquery html ajax browser

【解决方案1】：

经过一些研究，我得出结论，没有办法做到这一点。我发现this question 与我的非常接近，但除了处理网站上每个链接上的“onclick”事件之外，也没有任何有用的答案。不是一个非常漂亮的解决方案 - 也没有解决在地址栏上按 Enter 的功能。

我最终采用了不同的方法。绝对不能解决我想要的方式，但是我认为从代码角度来看它更优雅，从用户角度来看更实用。我创建了一个键盘快捷键来刷新页面：

function doc_keyUp(e) {
    if (e.altKey && e.keyCode === 82) {  // ALT + R
        if (confirm("Discard changes and refresh the page?")) {
            loadContent(location.hash.slice(1));
        }
        return false;
    }
}

document.addEventListener('keyup', doc_keyUp, false);

【讨论】：

【解决方案2】：

这可能是一种简单的方法，但是如果您将当前哈希存储在一个属性中，然后注册一个点击事件并检查哈希是否仍然相同呢？

这是一个（未经测试的）示例。但你应该明白了。

var storedHash = document.location.hash;

// You may add a data attribute to corresponding links to not 
// catch all 'a'-tags (i.e. document.querySelectorAll('a[data-nav=true]'))
var links = document.querySelectorAll('a');

for (var i in links) {

    if (!links.hasOwnProperty(i)) {
         continue;
    }

    links[i].addEventListener('click', function() {
        if (document.location.hash === storedHash) {
            // Here comes your logic
        }
    }); 

}

【讨论】：