如何在JS中判断页面是刷新/重载还是关闭？ASPX场景

当前ASPX页面的onunload事件会在页面刷新、关闭、跳转时均触发，导致误执行刷新父页面并关闭子页面的逻辑。以下是实现精准判断的方案：

核心实现逻辑 #

浏览器没有直接提供区分关闭/刷新的API，可通过beforeunload事件提前捕获状态，结合页面导航类型与用户交互行为设置标志位，在unload事件中根据标志位执行对应逻辑。

完整代码修改 #

脚本部分替换为： #

let isPageClosing = false;

// 监听页面即将卸载事件，提前判断操作类型
window.addEventListener('beforeunload', function(e) {
    // 用现代浏览器兼容的方式获取导航类型
    const navEntry = performance.getEntriesByType('navigation')[0];
    if (navEntry.type === 'reload') {
        // 判定为刷新操作，不执行后续逻辑
        isPageClosing = false;
    } else {
        // 通过鼠标位置辅助判断是否为关闭窗口操作
        const mouseX = e.clientX || e.pageX;
        const mouseY = e.clientY || e.pageY;
        // 鼠标在窗口外部/边缘时，判定为关闭窗口
        isPageClosing = (mouseX < 0 || mouseY < 0 || mouseX > window.innerWidth || mouseY > window.innerHeight);
    }
});

function refreshparent() {
    // 仅当判定为关闭窗口且父窗口存在时，执行刷新父页面并关闭子页面
    if (isPageClosing && window.opener) {
        window.opener.location.reload(true);
        window.close();
    }
}

ASPX页面body标签保持原绑定： #

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body style="background-color: #d6eceb" onunload="refreshparent()">

补充说明 #

1. 导航类型判断：performance.getEntriesByType('navigation')[0].type 返回值：
   • reload：页面刷新
   • navigate：首次加载或页面跳转
   • back_forward：浏览器后退/前进
2. 鼠标位置辅助判断：用户关闭窗口时通常点击右上角，鼠标会处于窗口边缘或外部，以此辅助区分关闭与跳转操作，提升判断准确率。
3. 父窗口存在校验：添加window.opener判断，避免子页面非父页面打开时出现报错。

内容的提问来源于stack exchange，提问作者Pablo Bongiolatti