通过 beforeunload 捕获关闭窗口但排除 asp 按钮答案

【问题标题】：capture close window by beforeunload but exclude asp button通过 beforeunload 捕获关闭窗口但排除 asp 按钮
【发布时间】：2020-10-09 02:45:12
【问题描述】：

我是 JavaScript 新手。

这是一个下载确认页面。我在页面上有一个下载按钮。

我想捕获关闭窗口事件以删除在AjaxHandler.ashx 中处理的临时pdf。

通过下面的代码，我发现deletePDF会在窗口初始化时执行，当下载bottun点击但在关闭窗口时不会执行。

我知道beforeunload 在某些情况下会被激活，但是为什么当我关闭窗口时它不起作用？（已解决，更新下方代码）

if (window.attachEvent) {
    window.attachEvent("beforeunload", deletePDF());
}
else if (window.addEventListener) {
    window.addEventListener("beforeunload", deletePDF(), false);
}
    
function deletePDF(event) {
    var link = "Handler/AjaxHandler.ashx?filestring=" + getQueryStringByName("filestring");
    $.ajax({
        type: "get",
        cache: false,
        url: link,
        beforeSend: function (XMLHttpRequest) {
        },
        success: function (data, textStatus) {
        },
        complete: function (XMLHttpRequest, textStatus) {
        },
        error: function () {
        }
    });
}

更新

我在 Alon Eitan 评论点将 addEventListener 中的 deletePDF() 更正为 deletePDF。

现在当我点击下载按钮并点击“X”关闭窗口时，代码将跳转到deletePDF。

我尝试使用clientY 来限制事件。但它无法对关闭窗口操作做出反应。（我知道我错过了通过键盘关闭窗口的案例，希望有人有更好的解决方案）

if (window.event.clientY < 0 )
   ...

像这样的按钮：

 <asp:Button ID="btnDownload" runat="server" CssClass="Button" Text="Download" Width="100px" CommandName="download" />

更新

根据 Alon Eitan 的最后建议，我尝试使用下面的代码来排除 asp 按钮。

在 Edge、Chrome、FF 中关闭窗口时，.on().off() 和 .bind().unbind() 都无法触发。我也尝试将async:false 添加到ajax。

但在 IE11 中，.bind().unbind() 会在窗口关闭和按钮单击时触发，.on() 会出错

对象不支持“on”属性或方法

$("[id$='_btnDownload']").click(function () {
    $(window).off("beforeunload");
    // $(window).unbind("beforeunload");
})
$(window).on('beforeunload', function() {
//$(window).bind('beforeunload', function() {
    ...
})

更新

根据回答者javascript - Disable AddEventListener on Submit - Stack Overflow，我尝试设置像submitting 这样的标志，但我发现如果我通过检查click 按钮来使用标志，当我在按钮之后关闭窗口时，处理程序将不会被执行，因为button 标志有已设置true。但我想检查每次触发 addEvenListener 时按钮是否单击。

对不起，我的英语不好，希望我能被理解。

谢谢。

【问题讨论】：

你只是在执行函数，应该是window.addEventListener("beforeunload", deletePDF, false);
@AlonEitan 它有效，谢谢。但是下载按钮也会触发deletePDF，我尝试使用(window.event.clientY<0)来限制，但是关闭窗口失败了。
使用 jquery 的 .on() 和 .off() 进行绑定和解除绑定事件。请注意，.unbind() 已弃用，并且只会删除使用 .bind() 附加的事件（.on() 和 .off() 也是如此）
@AlonEitan 嗨，谢谢，但是当我使用 jquery 的 .on() 和 off 时，什么也没有发生。
附加事件？你引用了哪些古代文章。

标签： javascript jquery asp.net

【解决方案1】：

最后，我用一个标志来记录下载状态，如果状态为true则清除它以返回初始化状态以供每次检查。我使用下面的代码：

var download = false;
document.addEventListener("click", function () {
    download = true;
})

window.addEventListener("beforeunload", function() {
    if (download)
        download = false;
    else
        deletePDF();
})

假设这种情况：

userA进入页面，点击下载，现在download = true;
userB进入页面，直接关闭窗口，现在download=ture，所以userB生成的临时文件不会被删除。

我在 localhost 中进行测试，在没有调试的情况下开始在不同的浏览器中打开 2 个窗口，这种情况不会发生。我不确定该方法是否有限制。

更新

我发现就我而言，我不需要与用户核实。这样我就可以使用unload 而不是beforeunload 并且不需要设置标志。

window.addEventListener("unload", deletePDF);

更新

根据Page Lifecycle API | Web | Google Developers，不推荐unload，正如文中所说，我们应该使用pagehide。根据Window: pagehide event - Web APIs | MDN，似乎所有浏览器都支持，但是如果你想支持ie10及更低版本，你可以看到你必须使用unload。

var terminationEvent = 'onpagehide' in self ? 'pagehide' : 'unload';
window.addEventListener(terminationEvent, deletePDF);

现在我没有环境来测试差异，两者都在我的项目本地测试中运行良好。

更新

unload 和 pagehide 在 FF 中都无法正常工作。

【讨论】：