Question

This question就像我在想的那样，但没有答案。

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

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

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

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

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

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

但现在，我无法察觉。如何检测这些命令并调用loadContent(location.hash.slice(1));函数？

Answer 1

经过一番研究，我得出的结论是，没有办法做到这一点。我发现this question非常接近我的，但也没有有用的答案，除了处理＆＃34; onclick＆＃34;网站上每个链接上的活动。这不是一个非常漂亮的解决方案 - 并且无法解决在地址栏上点击输入的功能。

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

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);

Answer 2

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

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

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
        }
    }); 

}

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

2 个答案: