onbeforeunload 函数在浏览器后退按钮上触发答案

【问题标题】：onbeforeunload function fires on browser back buttononbeforeunload 函数在浏览器后退按钮上触发
【发布时间】：2022-01-07 21:57:44
【问题描述】：

如果下一页的加载时间过长，我们将使用以下代码显示加载模式。

window.onbeforeunload = function () {
    window.setTimeout(showLoader, 2000);
}

function showLoader() {
    var loader = '<div id="layoutLoadingModal" class="modal fade" role="dialog">' +
        '<div class="modal-dialog">' +
            '<div class="modal-content">' +
                '<div class="modal-body">' +
                    '<h1>Loading!</h1>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>';
    $("body").append(loader);
    $('#layoutLoadingModal').modal('show');
}

不幸的是，如果用户使用浏览器后退按钮或带有history.go(-1); 的按钮，它也会显示模式有没有办法修改代码来防止这种情况发生？

*编辑此脚本出现在两个页面上。当我在“第二页”并单击返回时。第二页上的脚本没有触发，因为加载时间小于 2 秒。但是当上一页加载时脚本正在触发，即使它不应该。所以第一页从头开始显示加载模式，你必须点击页面上的某个地方来关闭它。

【问题讨论】：

并非如此。每当用户离开页面时，onbeforeunload 就会被触发，包括关闭选项卡/浏览器以及在历史记录中前进/后退。
脚本出现在两个页面上。当我在“第二页”并单击返回时。第二页上的脚本没有触发，因为加载时间小于 2 秒。但是脚本在“第一页”上触发，即使它不应该。所以第一页从头开始显示加载模式，你必须点击页面上的某个地方来关闭它。

标签： javascript asp.net-mvc

【解决方案1】：

好吧，事实证明我错误地处理了这种情况。当我离开起始页面时，将显示加载模式，至少如果加载第二页的时间超过 2 秒。当我单击后退按钮时，浏览器向我显示处于结束状态的起始页面，并显示加载模式。

所以当我添加时

window.onunload = function () {
    $('#layoutLoadingModal').modal('hide');
}

一切都按预期进行。

【讨论】：