I want to use onbeforeunload to give a message to users before leaving certain pages. Is it possible to know which URL they are supposed to jump to at the onbeforeunload event?

I want to use onbeforeunload to give a message to users before leaving certain pages. Is it possible to know which URL they are supposed to jump to at the onbeforeunload event?

• javascript
• dom-events

2 Answers 2

Is it possible to know which url they are supposed to jump to at the onbeforeunload event?

No, definitely not. The onbeforeunload event tells you only that the page is about to be unloaded, but not why.

It depends on how the user is leaving the page. If they are typing an url in the address bar - then you're out of luck. As far a I know there's no way to capture the url of an address bar jump.

If they are clicking on a link contained somewhere on the page - that you can use the click event to capture the url and then decide how you want to handle things.

I posed a similar question
How can i get the destination url of a link on the web page in the javascript onbeforeunload event?
because I had a project to fix a wholesale order form. During the process of filling out an order my client's customers would go back to the catalog to check on a product's detail page and loose the current information on their order form.
By using the code below (which uses JQuery though I'm sure you could create the same thing in pure Javascript if you had to) I could tell when the user clicked a link that would leave the order form and then give them the option of opening the link in a new window/tab or loading the url in the current window and loosing their form data, or just returning to the form. This code works with all of the major browsers, at least their more recent versions.

$('body a').click(function(e) {     
    //if link references a page element
    if ($(this).attr('href').charAt(0)=="#") {
        return;
    }

    //check if link is to same window    
    var pathname = window.location.pathname;
    var pathname2 = $(this).attr('href');
    pathname2 = pathname2.replace(/^.+\.\//, '');
    if (pathname.indexOf(pathname2) >= 0) {
        //link clicked is contained on same page
        //prevent page from getting reloaded & losing data
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation();    
        return;     
     }

    //link clicked on is another page
    if (hasMerchandise) {  //var to indicate user has items on order form       
        //give user options: leave page, open link in other page, stay, etc.
        // $('.popupForm-handleExitRequest').click();   //roll your own code    

        //prevent page from getting reloaded & losing data
        //in case user wants to cancel page change or open link in another window
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation();            
    } else {
        //load new page
        $(this).removeAttr('target');
    }       
});