How to warn user before leaving page but not on redirect

Question

I have some pages on my site that allow users to create and edit posts. When a user is on these pages, I'd like to warn them before leaving the page. I can do that like this:

//Only warn if user is on a New or Edit page
if(window.location.href.indexOf("/new") !== -1 || window.location.href.indexOf("/edit") !== -1  {
            window.addEventListener('beforeunload', function (e) {
                e.preventDefault();
                e.returnValue = '';
            });

//Doing this again because I don't know which version is compataible with all browsers
            window.onbeforeunload = function (e) {
                e.preventDefault();
                e.returnValue = ''
            };
        };

On a New or Edit page, the information in a form gets submitted to the server using JQuery ajax . The server returns a URL which the user gets redirected to to see the results of their post/update like this window.location.href = result; with result being the URL sent back from the server.

When that code runs to do the redirect, the user is getting the warning that they are about to leave the page they are on. I don't want it to do this on any redirects/navigation that the user has not performed. How could I stop/remove the warning in this instances?

UPDATE: This is not a duplicate. This question asks about preventing a beforeunload event happening on a redirect where the user has not requested to move away from the page himself.

Answer 1

Because you may want the event bound in some circumstances but not others within the same window , you'll have to not only add the event handler to the window , but you'll have to remove it as well (under the right circumstance) because even though you are changing the URL of the document loaded in the window , you are not changing the window itself:

function handleBeforeUnload (e) {
  e.preventDefault();
  e.returnValue = '';
}

//Only warn if user is on a New or Edit page
if(location.href.indexOf("/new") !== -1 || location.href.indexOf("/edit") !== -1  {
   window.addEventListener('beforeunload', handleBeforeUnload);
} else {
   // Remove the previously registered event handler (if any)
   window.removeEventListener('beforeunload', handleBeforeUnload);
}

Answer 2

If you want to force a navigation with window.location.href , you should disable the beforeunload event listener before you navigate.

Something like this, for example:

function unloadHandler(e) {
  e.preventDefault();
  e.returnValue = '';
}
window.addEventListener('beforeunload', unloadHandler);

function forceNavigation(url) {
    // Remove the "are you sure you want to leave?" message, then navigate
    window.removeEventListener('beforeunload', unloadHandler);
    window.location.href = url;
}

Call forceNavigation('https://example.com') to navigate without warning the user.

JS fiddle here: https://jsfiddle.net/o918wsam/1/