js 怎么判断页面跳转

JS 判断页面跳转的方法包括：监听浏览器的 beforeunload 事件、通过 document.referrer 获取前一个页面的 URL、使用 window.location 对象获取当前页面的 URL。其中，监听浏览器的 beforeunload 事件是最常用的方法，因为它可以在页面即将被卸载时执行特定的逻辑。

监听浏览器的 beforeunload 事件可以帮助我们在页面即将被卸载时执行一些清理工作或向用户发出提示，以防止数据丢失。以下是一个简单的示例代码：

window.addEventListener('beforeunload', function (event) {
    // 提示用户确认离开
    event.preventDefault();
    event.returnValue = '';
});

一、监听 `beforeunload` 事件

监听 beforeunload 事件是判断页面跳转的经典方法。这个事件会在页面即将卸载前触发，因此我们可以在这个事件中执行一些清理工作或向用户发出提示。

例如，在一个单页应用中，如果用户在编辑表单时尝试离开页面，我们可以使用 beforeunload 事件来提醒用户保存工作：

window.addEventListener('beforeunload', function (event) {
    if (formIsDirty) {
        event.preventDefault();
        event.returnValue = 'You have unsaved changes. Are you sure you want to leave?';
    }
});

这个示例代码会在用户尝试离开页面时显示一个确认对话框，防止用户意外丢失数据。

二、使用 `document.referrer`

document.referrer 属性返回当前文档的访问来源。如果当前页面是通过链接从其他页面跳转过来的，那么 document.referrer 就会包含前一个页面的 URL。

if (document.referrer) {
    console.log('Came from: ' + document.referrer);
}

这个属性可以帮助我们判断用户是从哪个页面跳转过来的，但需要注意的是，document.referrer 在某些情况下可能会被浏览器或服务器清除。

三、通过 `window.location` 对象获取当前 URL

window.location 对象包含有关当前 URL 的信息。通过这个对象，我们可以获取当前页面的 URL，并结合其他逻辑来判断是否发生了页面跳转。

例如，可以通过以下代码获取当前页面的 URL：

let currentURL = window.location.href;
console.log('Current URL is: ' + currentURL);

结合历史记录 API，我们还可以记录用户的浏览路径，并在必要时进行判断：

let historyStack = [];
window.addEventListener('popstate', function (event) {
    historyStack.push(window.location.href);
    console.log('Navigated to: ' + window.location.href);
});

四、使用 `hashchange` 事件

对于使用 URL 哈希（#）进行页面导航的单页应用，我们可以监听 hashchange 事件来判断页面跳转：

window.addEventListener('hashchange', function () {
    console.log('Hash changed to: ' + location.hash);
});

这个事件会在 URL 哈希部分发生变化时触发，适用于通过哈希实现页面导航的应用。

五、结合 `history` 对象

现代浏览器支持 HTML5 历史记录 API，可以通过 history.pushState 和 history.replaceState 修改浏览历史记录。结合 popstate 事件，我们可以更精确地判断页面跳转：

window.addEventListener('popstate', function (event) {
    console.log('State changed to: ' + JSON.stringify(event.state));
});
history.pushState({ page: 1 }, 'Title 1', '?page=1');
history.pushState({ page: 2 }, 'Title 2', '?page=2');
history.replaceState({ page: 3 }, 'Title 3', '?page=3');

这个示例展示了如何使用 pushState 和 replaceState 修改历史记录，并通过 popstate 事件监听状态变化。

六、使用 `visibilitychange` 事件

visibilitychange 事件在文档的可见性状态变化时触发，可以用来判断页面是否被隐藏或显示。虽然不能直接判断页面跳转，但可以辅助其他逻辑：

document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        console.log('Page is hidden');
    } else {
        console.log('Page is visible');
    }
});

七、结合 AJAX 请求

在复杂的单页应用中，我们可能需要通过 AJAX 请求来判断页面跳转。例如，可以在每次 AJAX 请求前后记录当前 URL，并在请求完成后判断是否发生了页面跳转：

let previousURL = window.location.href;
function checkURLChange() {
    let currentURL = window.location.href;
    if (currentURL !== previousURL) {
        console.log('URL changed from ' + previousURL + ' to ' + currentURL);
        previousURL = currentURL;
    }
}
// 示例：在每次 AJAX 请求后检查 URL 变化
function ajaxRequest() {
    // 发起 AJAX 请求
    fetch('https://example.com/api/data')
        .then(response => response.json())
        .then(data => {
            // 处理数据
            checkURLChange();
        });
}

八、结合项目管理系统

在实际开发中，我们经常需要使用项目管理系统来跟踪和管理项目进展。研发项目管理系统PingCode 和 通用项目协作软件Worktile 是两个非常不错的选择。PingCode 专注于研发项目管理，提供了丰富的功能来支持敏捷开发和 DevOps 实践。而 Worktile 则提供了更广泛的项目协作功能，适用于各种类型的项目管理需求。

通过这些系统，我们可以更好地组织和管理项目，确保每个阶段的工作都能顺利进行。

九、总结

判断页面跳转的方法多种多样，从监听浏览器事件到使用历史记录 API，再到结合 AJAX 请求和项目管理系统，每种方法都有其特定的应用场景和优势。监听 beforeunload 事件、使用 document.referrer、通过 window.location 对象获取当前 URL 是最常用的几种方法，通过合理组合这些方法，我们可以精确判断页面跳转，确保应用的稳定性和用户体验。

js 怎么判断页面跳转

一、监听 beforeunload 事件

二、使用 document.referrer

三、通过 window.location 对象获取当前 URL

四、使用 hashchange 事件

五、结合 history 对象

六、使用 visibilitychange 事件