区分不同类型的 beforeunload 事件

Question

在 JavaScript 中，是否可以区分由用户关闭浏览器选项卡和单击mailto链接触发的beforeunload事件？

基本上，我想这样做：

window.addEventListener("beforeunload", function (e) {

    if(browserTabClosed) {
        // Do one thing
    }
    else if (mailtoLinkClicked) {
        // Do a different thing
    }
}

Answer 1

通过查看传入的事件（下面的e ）找到了解决方案：

window.addEventListener("beforeunload", function (e) {

    // We can use `e.target.activeElement.nodeName`
    // to check what triggered the passed-in event.
    // - If triggered by closing a browser tab: The value is "BODY"
    // - If triggered by clicking a link: The value is "A"
    const isLinkClicked = (e.target.activeElement.nodeName === "A");

    // If triggered by clicking a link
    if (isLinkClicked) {
        // Do one thing
    }
    // If triggered by closing the browser tab
    else {
        // Do a different thing
    }
}

Answer 2

beforeunload方法在浏览器之间具有不稳定的行为，原因是浏览器实现试图避免在此处理程序中运行的弹出窗口和其他恶意代码。

实际上没有通用的（跨浏览器）方法来检测触发beforeunload事件的原因。

说，在您的情况下，您可以检测到单击window以区分两种所需的行为：

window.__exit_with_link = false;
window.addEventListener('click', function (e) {
    // user clicked a link
    var isLink = e.target.tagName.toLowerCase() === 'a';

    // check if the link has this page as target:
    // if is targeting a popup/iframe/blank page
    // the beforeunload on this page
    // would not be triggered anyway
    var isSelf = !a.target.target || a.target.target.toLowerCase() === '_self';
    
    if (isLink && isSelf) {
        window.__exit_with_link = true;

        // ensure reset after a little time
        setTimeout(function(){ window.__exit_with_link = false; }, 50);
    }
    else { window.__exit_with_link = false; }
});

window.addEventListener('beforeunload', function (e) {
    if (window.__exit_with_link) {
        // the user exited the page by clicking a link
    }
    else {
        // the user exited the page for any other reason
    }
}

显然这不是正确的方法，但仍然有效。

同样，您可以添加其他处理程序来检查用户离开页面的其他原因（例如，键盘 CTRL-R 用于刷新等）