如何检测 JavaScript 中的哈希值后 URL 是否已更改

Question

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

• onload 事件是否再次被调用？
• URL 是否有事件处理程序？
• 或者必须每秒检查一次 URL 以检测更改？

Answer 1

更新 2024：

一些现代浏览器现在可能支持导航 API，可以像这样使用：

window.navigation.addEventListener("navigate", (event) => {
    console.log('location changed!');
})

MDN 上的导航 API 文档

---

之前的回答（没有导航 API）：

实施下面详述的修改后，自定义 locationchange< /代码>可以使用事件，像这样：

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

原来，在这些修改之前，只有 popstate 事件，但是没有 pushstate 和 replacestate 的事件代码>.

通过这些修改，这些历史记录函数还将触发自定义 locationchange 事件，以及 pushstate 和 replacestate 事件（如果需要）。

这些是修改：

(() => {
    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'));
    });
})();

此修改与 Christian 的回答类似，修改历史对象以添加一些功能。

注意：正在创建 闭包，以将旧函数保存为是新函数的一部分，这样每当新函数被调用时它就会被调用。

---

其他解决方案的限制说明：

使用 window.addEventListener('hashchange',() => {}) 仅当网址中主题标签后面的部分时才会响应变化。

window.addEventListener('popstate',() => {}) 对于检测所有导航更改并不总是可靠，因为它仅在使用浏览器按钮或类似方法向后或向前导航时触发。当通过history.pushState()或history.replaceState()以编程方式更改历史记录时，它不会触发，这通常在单页面应用程序中用于更新URL而不重新加载页面。

Answer 2

在现代浏览器（IE8+、FF3.6+、Chrome）中，您只需监听 window 上的 hashchange 事件即可。

在某些旧浏览器中，您需要一个计时器来持续检查location.hash。如果您使用 jQuery，则有一个 插件 可以完成此操作。

下面的示例

我撤消了任何 URL 更改，以仅保持滚动：

<script type="text/javascript">
  if (window.history) {
    var myOldUrl = window.location.href;
    window.addEventListener('hashchange', function(){
      window.history.pushState({}, null, myOldUrl);
    });
  }
</script>

请注意，上面使用的 history-API 可在 Chrome、Safari、Firefox 4+ 和 Internet Explorer 10pp4+ 中使用

Answer 3

window.onhashchange = function() { 
     //code  
}

window.onpopstate = function() { 
     //code  
}

或

window.addEventListener('hashchange', function() { 
  //code  
});

window.addEventListener('popstate', function() { 
  //code  
});

使用 jQuery

$(window).bind('hashchange', function() {
     //code
});

$(window).bind('popstate', function() {
     //code
});

Answer 4

经过一番研究后编辑：

不知何故，我似乎被 Mozilla 文档上的文档愚弄了。 popstate 事件（及其回调函数 onpopstate）未触发 每当在代码中调用 pushState() 或 replaceState() 时。因此，最初的答案并不适用于所有情况。

然而，有一种方法可以通过根据@alpha123对函数进行猴子修补来规避这个问题：

var pushState = history.pushState;
history.pushState = function () {
    pushState.apply(history, arguments);
    fireEvents('pushState', arguments);  // Some event-handling function
};

原始答案

鉴于这个问题的标题是“如何检测 URL 更改”，当您想知道完整路径何时更改（而不仅仅是哈希锚点）时，答案是您可以听听popstate 事件：

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

Mozilla 文档中 popstate 的参考

目前（2017 年 1 月）有 全球 92% 的浏览器支持 popstate。

Answer 5

使用jquery（和插件），您可以执行

$(window).bind('hashchange', function() {
 /* things */
});

http://benalman.com/projects/jquery-hashchange-plugin /

否则，是的，您将必须使用 setInterval 并检查哈希事件 (window.location.hash) 中的更改

更新！一个简单的草稿

function hashHandler(){
    this.oldHash = window.location.hash;
    this.Check;

    var that = this;
    var detect = function(){
        if(that.oldHash!=window.location.hash){
            alert("HASH CHANGED - new has" + window.location.hash);
            that.oldHash = window.location.hash;
        }
    };
    this.Check = setInterval(function(){ detect() }, 100);
}

var hashDetection = new hashHandler();

Answer 6

添加哈希更改事件监听器！

window.addEventListener('hashchange', function(e){console.log('hash changed')});

或者，监听所有 URL 更改：

window.addEventListener('popstate', function(e){console.log('url changed')});

这比下面的代码更好，因为 window.onhashchange 中只能存在一件事，并且您可能会覆盖其他人的代码。

// Bad code example

window.onhashchange = function() { 
     // Code that overwrites whatever was previously in window.onhashchange  
}

Answer 7

适用于 Chrome 102+ (2022-05-24)

navigation.addEventListener("navigate", e => {
  console.log(`navigate ->`,e.destination.url)
});

API参考WICG/navigation-api

Answer 8

这个解决方案对我有用：

function checkURLchange(){
    if(window.location.href != oldURL){
        alert("url changed!");
        oldURL = window.location.href;
    }
}

var oldURL = window.location.href;
setInterval(checkURLchange, 1000);

Answer 9

如果没有一个窗口事件适合您（因为它们不适用于我的情况），您还可以使用 MutationObserver 查看根元素（非递归）。

// capture the location at page load
let currentLocation = document.location.href;

const observer = new MutationObserver((mutationList) => {
  if (currentLocation !== document.location.href) {
    // location changed!
    currentLocation = document.location.href;

    // (do your event logic here)
  }
});

observer.observe(
  document.getElementById('root'),
  {
    childList: true,

    // important for performance
    subtree: false
  });

这可能并不总是可行，但通常情况下，如果 URL 更改，根元素的内容也会更改。

我还没有分析过，但理论上这比计时器的开销要少，因为通常实现观察者模式，以便在发生更改时它只是循环遍历订阅。我们在这里只添加了一项订阅。另一方面，计时器必须非常频繁地检查，以确保在 URL 更改后立即触发事件。

此外，这很可能比计时器更可靠，因为它消除了计时问题。

Answer 10

当单击将您重定向到同一域上的不同页面的链接时，这些似乎都不起作用。因此，我制定了自己的解决方案：

let pathname = location.pathname;
window.addEventListener("click", function() {
    if (location.pathname != pathname) {
        pathname = location.pathname;
        // code
    }
});

您还可以检查 popstate 事件（如果用户返回页面）

window.addEventListener("popstate", function() {
    // code
});

---

更新

Navigation API 是一项实验性功能，可能与某些浏览器不兼容；请参阅浏览器兼容性。

window.navigation.addEventListener('navigate', function() {
    // code
});

Answer 11

虽然是一个老问题，但 Location-bar 项目非常有用。

var LocationBar = require("location-bar");
var locationBar = new LocationBar();

// listen to all changes to the location bar
locationBar.onChange(function (path) {
  console.log("the current url is", path);
});

// listen to a specific change to location bar
// e.g. Backbone builds on top of this method to implement
// it's simple parametrized Backbone.Router
locationBar.route(/some\-regex/, function () {
  // only called when the current url matches the regex
});

locationBar.start({
  pushState: true
});

// update the address bar and add a new entry in browsers history
locationBar.update("/some/url?param=123");

// update the address bar but don't add the entry in history
locationBar.update("/some/url", {replace: true});

// update the address bar and call the `change` callback
locationBar.update("/some/url", {trigger: true});

Answer 12

要侦听 url 更改，请参见下文：

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

如果您打算在某些特定条件后停止/删除侦听器，请使用此样式。

window.addEventListener('popstate', function(e) {
   console.log('url changed')
});

Answer 13

下面的答案来自这里（使用旧的javascript语法（无箭头功能，支持IE 10+））：
https://stackoverflow.com/a/52809105/9168962

(function() {
  if (typeof window.CustomEvent === "function") return false; // If not IE
  function CustomEvent(event, params) {
    params = params || {bubbles: false, cancelable: false, detail: null};
    var evt = document.createEvent("CustomEvent");
    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
    return evt;
  }
  window.CustomEvent = CustomEvent;
})();

(function() {
  history.pushState = function (f) {
    return function pushState() {
      var ret = f.apply(this, arguments);
      window.dispatchEvent(new CustomEvent("pushState"));
      window.dispatchEvent(new CustomEvent("locationchange"));
      return ret;
    };
  }(history.pushState);
  history.replaceState = function (f) {
    return function replaceState() {
      var ret = f.apply(this, arguments);
      window.dispatchEvent(new CustomEvent("replaceState"));
      window.dispatchEvent(new CustomEvent("locationchange"));
      return ret;
    };
  }(history.replaceState);
  window.addEventListener("popstate", function() {
    window.dispatchEvent(new CustomEvent("locationchange"));
  });
})();

Answer 14

在做一些 chrome 扩展时，我遇到了同样的问题，还有一个额外的问题：有时，页面会更改，但 URL 不会更改。

例如，只需转到 Facebook 主页，然后单击“主页” ' 按钮。您将重新加载页面，但 URL 不会更改（单页应用程序样式）。

99% 的时间，我们正在开发网站，这样我们就可以从 Angular、React、Vue 等框架获取这些事件。

但是，就我的 Chrome 扩展（在 Vanilla JS 中）而言，我必须监听每个“页面更改”都会触发的事件，通常可以通过 URL 更改捕获该事件，但有时却不能。

我的自制解决方案如下：

listen(window.history.length);
var oldLength = -1;
function listen(currentLength) {
  if (currentLength != oldLength) {
    // Do your stuff here
  }

  oldLength = window.history.length;
  setTimeout(function () {
    listen(window.history.length);
  }, 1000);
}

所以基本上是 leoneckert 解决方案，应用于窗口历史记录，当单页应用程序中的页面更改时，窗口历史记录将会更改。

不是火箭科学，而是我发现的最干净的解决方案，考虑到我们在这里只检查整数相等性，而不是更大的对象或整个 DOM。

Answer 15

在单独的线程中找到了一个有效的答案：

没有一个事件永远有效，并且猴子修补pushState事件非常漂亮大多数主要 SPA 的成功或失败。

所以智能投票对我来说最有效。您可以添加任意数量的事件类型，但这些似乎对我来说非常有效。

为 TS 编写，但易于修改：

const locationChangeEventType = "MY_APP-location-change";

// called on creation and every url change
export function observeUrlChanges(cb: (loc: Location) => any) {
  assertLocationChangeObserver();
  window.addEventListener(locationChangeEventType, () => cb(window.location));
  cb(window.location);
}

function assertLocationChangeObserver() {
  const state = window as any as { MY_APP_locationWatchSetup: any };
  if (state.MY_APP_locationWatchSetup) { return; }
  state.MY_APP_locationWatchSetup = true;

  let lastHref = location.href;

  ["popstate", "click", "keydown", "keyup", "touchstart", "touchend"].forEach((eventType) => {
    window.addEventListener(eventType, () => {
      requestAnimationFrame(() => {
        const currentHref = location.href;
        if (currentHref !== lastHref) {
          lastHref = currentHref;
          window.dispatchEvent(new Event(locationChangeEventType));
        }
      })
    })
  });
}

用法

observeUrlChanges((loc) => {
  console.log(loc.href)
})

Answer 16

享受！

var previousUrl = '';
var observer = new MutationObserver(function(mutations) {
  if (location.href !== previousUrl) {
      previousUrl = location.href;
      console.log(`URL changed to ${location.href}`);
    }
});

Answer 17

我创建了这个与 hashchange 事件非常相似的事件

// onurlchange-event.js v1.0.1
(() => {
    const hasNativeEvent = Object.keys(window).includes('onurlchange')
    if (!hasNativeEvent) {
        let oldURL = location.href
        setInterval(() => {
            const newURL = location.href
            if (oldURL === newURL) {
                return
            }
            const urlChangeEvent = new CustomEvent('urlchange', {
                detail: {
                    oldURL,
                    newURL
                }
            })
            oldURL = newURL
            dispatchEvent(urlChangeEvent)
        }, 25)
        addEventListener('urlchange', event => {
            if (typeof(onurlchange) === 'function') {
                onurlchange(event)
            }
        })
    }
})()

使用示例：

window.onurlchange = event => {
    console.log(event)
    console.log(event.detail.oldURL)
    console.log(event.detail.newURL)
}

addEventListener('urlchange', event => {
    console.log(event)
    console.log(event.detail.oldURL)
    console.log(event.detail.newURL)
})

Answer 18

这将为您提供新的网址

navigation.addEventListener('navigate',event)=>{
console.log("page changed", event.destination.url)
})

Answer 19

window.addEventListener("beforeunload", function (e) {
    // do something
}, false);

Answer 20

另一种简单的方法是添加一个点击事件，通过类名到页面上的锚标记来检测何时被单击，然后锚标记必须采用这种格式

<a href="#{page_name}">{Link title}</a>

，然后您可以使用“窗口” .location.href”来获取url数据，即(#page_name)，您可以通过ajax请求发送到服务器以获取所请求页面的html数据。

然后在服务器端，您可以用您最喜欢的后端语言实现 switch 语句，以根据客户端的请求分别呈现每个页面。

简单又容易。

Answer 21

看一下 jQuery 的卸载函数。它处理所有的事情。

https://api.jquery.com/unload/

当用户离开页面时，卸载事件将发送到窗口元素。这可能意味着许多事情之一。用户可以单击链接离开页面，或者在地址栏中输入新的 URL。前进和后退按钮将触发该事件。关闭浏览器窗口将导致该事件被触发。即使页面重新加载也会首先创建卸载事件。

$(window).unload(
    function(event) {
        alert("navigating");
    }
);