javascript - 如何在 JavaScript 中检测哈希后 URL 是否已更改

标签 javascript ajax fragment-identifier

如何在 JavaScript 中检查 URL 是否已更改?例如,像 GitHub 这样使用 AJAX 的网站会在 # 符号后附加页面信息,以创建一个唯一的 URL,而无需重新加载页面。检测此 URL 是否更改的最佳方法是什么?

  • 是否再次调用了onload事件?
  • URL 是否有事件处理程序?
  • 或者必须每秒检查一次 URL 以检测变化?

最佳答案

我希望能够添加 locationchange 事件监听器。经过下面的修改,我们就可以了,像这样

window.addEventListener('locationchange', function () {
    console.log('location changed!');
});

相比之下,window.addEventListener('hashchange',() => {}) 只会在 url 中的主题标签之后的部分发生变化时触发,而 window.addEventListener( 'popstate',() => {}) 并不总是有效。

这个修改,类似于Christian's answer , 修改历史对象以添加一些功能。

默认情况下,在这些修改之前,有一个popstate事件,但是没有pushstatereplacestate的事件。

这修改了这三个函数,以便所有函数都触发一个自定义的 locationchange 事件供您使用,如果您使用 pushstatereplacestate 事件想用那些。

这些是修改:

(() => {
    let oldPushState = history.pushState;
    history.pushState = function pushState() {
        let ret = oldPushState.apply(this, arguments);
        window.dispatchEvent(new Event('pushstate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    };

    let oldReplaceState = history.replaceState;
    history.replaceState = function replaceState() {
        let ret = oldReplaceState.apply(this, arguments);
        window.dispatchEvent(new Event('replacestate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    };

    window.addEventListener('popstate', () => {
        window.dispatchEvent(new Event('locationchange'));
    });
})();

请注意,我们正在创建一个 closure , 将旧函数保存为新函数的一部分,以便在调用新函数时调用它。

关于javascript - 如何在 JavaScript 中检测哈希后 URL 是否已更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6390341/

相关文章:

JQuery tagit 键盘导航不起作用

javascript - Rails - 将 ajax 添加到部分, 'undefined method ` 渲染''

javascript - 是否有任何用于处理 hashbang/shebang (#!) url 的 javascript 库?

http - url片段和Referer头

javascript - 从数组中的所有 javascript 对象添加特定属性的值

javascript - 使用 javascript 解析作为 JSON 响应返回的 java 映射

javascript - 从一个需要另一个 JavaScript 文件的函数调用

php - 如何使用jquery ajax php上传文件

javascript - Laravel - 检查用户是否使用 JavaScript 登录

javascript - 如果 URL 哈希发生变化,页面是否会显示不同的内容?