capture close window by beforeunload but exclude asp button

Question

I am new to javascript.

This is a download confirm page. I have a download button on the page.

I want to capture the close window event to delete the temp pdfs which is handled in AjaxHandler.ashx.

With the code below, I find the deletePDF will be executed when the window init, when the download bottun click but will not be executed when close window.

I know the beforeunload will be activate in several cases, but why when I close window it doesn't effect? (has solved, update below the codes)

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 () {
        }
    });
}

Update

I correct the deletePDF() to deletePDF in addEventListener by Alon Eitan comment point.

Now the code will jump into deletePDF when I click download button and click 'X' close window.

I try the clientY to restrict the event. But it can't react to the close window action. (I know I miss the cases close window by keyboard, hope someone have better solutions)

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

The button like :

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

Update

By Alon Eitan's last advise, I try to use the code below to exclude the asp button.

Both .on().off() and .bind().unbind() can't trigger when window close in Edge, Chrome, FF. I also try add async:false to ajax.

But in IE11, .bind().unbind() trigger when window close and button click, .on() get errors

Object doesn't support property or method 'on'

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

Update

According to the anwser javascript - Disable AddEventListener on Submit - Stack Overflow, I try to set a flag like the the submitting, but I find that if I use a flag by checking click button, when I close window after the button, the handler will not be execute because the button flag has been set true. But I want to check if the button click when everytime the addEvenListener be triggered.

Sorry for my poor English, wish I can be understood.

Thanks.

You're just executing the function, should be `window.addEventListener("beforeunload", deletePDF, false);` — Alon Eitan, Oct 09 '20 at 04:48
@AlonEitan It works, thanks. But the download button also trigger deletePDF, I try to use `(window.event.clientY<0)` to restrict but it failed when close window. — Jun Yu, Oct 09 '20 at 05:31
Use jquery's [.on()](https://api.jquery.com/on/) and [.off()](https://api.jquery.com/on/) for binding and unbinding events. Note that [.unbind()](https://api.jquery.com/unbind/) is deprecated and will only remove events that was attached using `.bind()` when used (Same goes for `.on()` and `.off()`) — Alon Eitan, Oct 09 '20 at 09:29
@AlonEitan Hi, thanks, but when I use jquery's `.on()` and `off` , nothing happen. — Jun Yu, Oct 10 '20 at 03:03
Just write a cron job that removes files that are X amount of time old. Do not rely on browser events to clean it up. — epascarello, Oct 12 '20 at 03:07
@epascarello Hi, do you mean remove files after serval certian time? But how can I sure that the download process is completed? The download may trigger many pdfs. And if the download process is going, remove the files will cause dowanload failed, is it right? — Jun Yu, Oct 12 '20 at 03:14
@epascarello Or you mean delete the pdfs regularly? Take a example, everytime download delete the files cashed before? — Jun Yu, Oct 12 '20 at 03:30

Jun Yu · Accepted Answer · 2020-10-14T02:04:23.340

At last, I use a flag to record the download status, and clear it if the status is true to return the init status for everytime checking. I use the code below:

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

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

Assume this case:

userA get into the page, and click download, now download = true;
userB get into the page, close the window directly, now download=ture , so the temp file produced by userB will not be deleted.

I test in localhost by starting without debug to open 2 window in different browser, and the case will not happen. I am not sure the method have limitation or not.

Update

I find that in my case, I don't need to check with users. So that I can use unload instead of beforeunload and I don't need set a flag.

window.addEventListener("unload", deletePDF);

Update

According to Page Lifecycle API | Web | Google Developers, unload is not recommended, and as the passage suggests, we should use pagehide instead. According to Window: pagehide event - Web APIs | MDN, it seems be supported by all browsers, but if you want to supprot ie10 and lower, you can see the you have to use unload.

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

Now I have no environment to test the difference, and both work well in my project local test.

Update

Both unload and pagehide can't work correctly in FF.

capture close window by beforeunload but exclude asp button

1 Answers1