“hashchange”不会在 Wordpress 中触发

Question

您好，我正在建立这个网站：http://www.freiheitmedia.com/en/。它是使用 Themify Ultra 主题构建的。

我的目标是在滚动或点击链接时去掉 url 中的#something 部分。

我需要用 JavaScript/jQuery 来做，因为没有基于主题的解决方案，支持人员也帮不了我。

我已经测试过，知道下面的代码可以随意替换url：

history.replaceState("",document.title,window.location.pathname + window.location.search);

现在，问题是 我似乎无法触发“hashchange”事件。我将以下代码放在页脚中，但在这两种情况下都没有达到警报语句：

<script>
    window.addEventListener("hashchange", function(e){
        alert("hiii");
    });
</script>

或

<script>
    window.addEventListener("hashchange", function(e){
        alert("hiii");
    }, false);
</script>

我怀疑主题设置可能会阻止 hashchange 事件，但这只是猜测。

你们知道为什么“hashchange”没有触发吗？

Answer 1

来自您的澄清评论：

当您访问该站点并向下滚动时，您会看到 URL 会根据您所在的部分而变化。特别是 #part 会发生变化。我的目标是防止这种行为，并始终拥有一个干净的 url（没有任何#hashes）。

最好的方法是通过更新哈希找到响应滚动事件的插件（这可能很有帮助；如果您将其添加为书签，则将您带回页面的该部分）并打开它关了。在页面上使用插件来争夺对哈希的控制是一个坏主意。

仅次于此：

由于hashchange 没有触发，插件必须使用history 的replaceState 或pushState 或类似方法来设置哈希，因为这样不会触发hashchange。您可以将这些函数替换为您自己的去除哈希片段的版本：

// I DON'T RECOMMEND THIS APPROACH
(function() {
    function removeHash(url) {
        var u = String(url || "");
        var x = u.lastIndexOf("#");
        return x == -1 ? u : u.substring(0, x);
    }
    var originalReplaceState = history.replaceState;
    history.replaceState = function(state, title, url) {
        url = removeHash(url);
        return originalReplaceState.call(history, state, title, url);
    };
    var originalPushState = history.pushState;
    history.pushState = function(state, title, url) {
        url = removeHash(url);
        return originalPushState.call(history, state, title, url);
    };
})();

不过，实际上最好通过添加散列片段并禁用它来找到响应滚动事件的任何内容。