在选项卡或浏览器窗口关闭时运行代码，但在页面重新加载时不运行代码-解网

问：

我想在用户关闭选项卡或窗口时运行 javascript 函数，但如果用户只是刷新页面，则不行。

我尝试了该事件的事件处理程序，但它也会在页面重新加载时触发。有没有办法忽略事件的页面重新加载，或者是否有其他事件可以解决我的问题？beforeunloadbeforeunload

这是我当前的代码：

window.addEventListener("beforeunload", (event) => {
    event.preventDefault();
    // Remove this tab from sessionStorage
    sessionStorage.removeItem(tabKey);

    // Notify other tabs to close this tab
    const activeTabs = JSON.parse(localStorage.getItem(tabKey)) || [];
    const updatedTabs = activeTabs.filter((id) => id !== tabId);

    if (updatedTabs?.length === 0) {
        // All tabs are closed, execute your code
        const id = events.getIdentifier();
        let URL =
            API_URL +
            "chat/change-status?url=" +
            FIREBASE_FUNCTIONS_URL +
            "&id=" +
            id +
            "&status=" +
            Visitor_status.inactive +
            "&chat_status=" +
            chat_status.no_action;
        fetch(URL, {
            keepalive: true,
        });
    }
});

JavaScript 事件 dom-events 页面刷新 onbeforeunload

 let isTabHidden = false;

// Detect when the visibility of the page changes
 document.addEventListener('visibilitychange', () => {
 if (document.visibilityState === 'hidden') {
     isTabHidden = true;
 }
});

 window.addEventListener("beforeunload", (event) => {
 // Check if the tab's visibility has changed to hidden
 if (isTabHidden) {
 return; 
 }

 // ... (The rest of your code remains unchanged.)
});

基本上，我的用例是我有聊天应用程序，从访问者的角度来看，我希望如果访问者关闭选项卡/窗口，那么我必须运行 API，基本上将该访问者的状态从活动更改为非活动，但是当页面刷新时，该功能也会触发这就是问题所在，这就是为什么我只需要关闭选项卡/窗口而不是刷新时的事件。

0赞 Bhavy Ladani 8/31/2023

beforeUnload 事件不区分刷新和关闭。而且，如果您为此编写任何 hack，我不确定这是否适用于所有浏览器，因为这可能会失败并且不合法。

0赞 Heiko Theißen 8/31/2023

将状态更改为 inactive onbeforeunload，并在页面（重新）加载后更改为 active。更好的是，让页面每分钟左右“ping”一次服务器，如果没有更多的ping，则将状态更改为非活动状态。

上一个：如何检查所有图像是否都加载在next.js 13（应用程序路由器）的特定组件中？

下一个：e.ctrl键在Firefox上不起作用，当单击选择元素时

在选项卡或浏览器窗口关闭时运行代码，但在页面重新加载时不运行代码

Run code when the tab or browser windows is closed, but not on page reload

评论

评论