当我们需要在网页跳转时执行一些特殊逻辑时，拦截 window.location 的改变会非常有用。这篇文章将介绍如何使用 JavaScript 拦截 window.location 的改变。
监听 window.location 改变事件
首先，我们需要监听 window.location 改变事件。可以使用 window.addEventListener 方法来实现：
window.addEventListener('popstate', function(event) {
console.log('location changed', event);
});上面的代码将在浏览器后退或前进时输出日志。但是，如果我们直接修改 window.location，这个监听器将不会被触发。
使用 History API
为了能够捕获所有通过 window.location 进行的导航，我们需要使用 History API。History API 提供了一组方法来操作浏览器的历史记录，从而能够在不刷新页面的情况下修改 URL。
// 修改 URL
history.pushState(null, null, '/new-url');
// 监听 URL 改变事件
window.addEventListener('popstate', function(event) {
console.log('location changed', event);
});现在，无论是用户点击链接还是直接修改 window.location，都会触发监听器。
实际应用举例
下面是一个示例，演示如何在页面跳转时进行身份验证：
-- -------------------- ---- -------
--------- -----
------
------
----------- ---------------
----- ----------------
-------
------
-----
----
------ ----------------------
------ ------------------------------------
------ ------------------------------
-----
------
------
----------- ---------
-------
--------
-- ------
-------- ----------------- -
------ ----- -- ----- ----------
-
-- ------
----------------------------------- --------------- -
-- -------------------- -
-----------------------
----------------------- ----- ----------
-
---
-- --------
------------------------------ -------------------------- -
------------------------------ --------------- -
-----------------------
----------------------- ----- ---------------------------
---
---
---------
-------
-------在这个示例中，我们使用 window.addEventListener 监听 popstate 事件，如果用户未通过身份验证，则通过 event.preventDefault() 阻止页面跳转，并使用 history.pushState 将 URL 修改为登录页面。当用户登录成功后，我们可以再次使用 history.pushState 将 URL 修改为原来的地址。
总结
拦截 window.location 的改变可以帮助我们在页面跳转时执行一些特殊逻辑，比如身份验证、统计分析等。通过使用 History API，我们可以监听所有通过 window.location 进行的导航，并在必要时取消或修改导航。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31286
