capture close window by beforeunload but exclude asp button

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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:

  1. userA get into the page, and click download, now download = true;
  2. 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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x