Browsers back button click with confirm box

browser back and forward button event jquery
browser back button event
jquery alert on browser back button
how to detect browser refresh event in javascript
browser back button event jquery
detect browser back button click using javascript
javascript detect browser close or refresh
call javascript function on browser back button

Need to create the javascript confirm pop up on click of browsers back button. If I click on back button pop up will come up and say "you want to go ahead ?" if click on Yes then it would have redirected to previous page.

I have following code it is not working as per the requirement.

if(window.history && history.pushState){ // check for history api support
        window.addEventListener('load', function(){

            // create history states
            history.pushState(-1, null); // back state
            history.pushState(0, null); // main state
            history.pushState(1, null); // forward state
            history.go(-1); // start in main state

            this.addEventListener('popstate', function(event, state){
                // check history state and fire custom events
                if(state = event.state){

                    event = document.createEvent('Event');
                    event.initEvent(state > 0 ? 'next' : 'previous', true, true);
                    this.dispatchEvent(event);

                    var r = confirm("Would you like to save this draft?");
                    if(r==true) { 
                        // Do nothing      

                    } else {  
                       self.location = document.referrer;    
                    }
                    // reset state
                    history.go(-state);

                }
            }, false);
        }, false);
    }

Any help in this would be really appreciable.

Try this: it's simple and you get total control over the back button.

if (window.history && history.pushState) {
    addEventListener('load', function() {
        history.pushState(null, null, null); // creates new history entry with same URL
        addEventListener('popstate', function() {
            var stayOnPage = confirm("Would you like to save this draft?");
            if (!stayOnPage) {
                history.back() 
            } else {
                history.pushState(null, null, null);
            }
        });    
    });
}

Browser Back Button Alert/Confirm Message Functionality , Browser Back Button Alert/Confirm message functionality. for all links on the page $('a').click(function() { window.onbeforeunload = null; });  Great work Brooke. I would like to be able to use this to go a bit further. When someone has hit the Back button I present them with a confirm box warning them that any input data will be lost if they have not saved. If they click OK, the back button basically executes. If they click Cancel, they remain on the current page.

window.onbeforeunload = function() {
    return "Leaving this page will reset the wizard";
};

This would help you.

DEMO

How to popup an alert when back button is pressed in the browser?, Now am disabling back button by using window.history.forward() function.It works fine .But I need to give an alert too when user clicks back button  If lets say user navigates from route A to route B. Now, from route B if user clicks on browser back button I wanted a popup confirmation which will ask user whether to go back. If user clicks Cancel, he should stay on Route B itself.

It's possible to always display a confirmation box, when a user tries to leave the page. That also includes pressing the back button. Maybe that's a suitable quick-fix for your issue?

window.addEventListener('beforeunload', function() {
    return 'You really want to go ahead?';
}); 

http://jsfiddle.net/squarefoo/8SZBN/1/

Display alert on browser back button click?, Hi,. When the user clicks on the hyperlink or attempts to close the browser window, the onbeforeunload event fires on the body and a dialog box  Solution to browser back button click event handling. In Javascript, onbeforeunload event is fired when the page is about to unload and there can be multiple reasons for this unload. For instance, back or forward or refresh button is clicked or a link on the page is clicked etc.

The solution by Robert Moore caused duplicate events when refreshing the page for me. Presumably since the state would be re-added multiple times.

I worked around it by only adding state if it is null. I also clean up the listener before going back.

    window.onload = function () {
        if (window.history && history.pushState) {
            if (document.location.pathname === "/MyBackSensitivePath") {
                if (history.state == null) {
                    history.pushState({'status': 'ongoing'}, null, null);
                }
                window.onpopstate = function(event) {
                    const endProgress = confirm("This will end your progress, are you sure you want to go back?");
                    if (endProgress) {
                        window.onpopstate = null;
                        history.back();
                    } else {
                        history.pushState(null, null, null);
                    }
                };
            }
        }
    };

MDN has a good read on managing state: https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

How to detect back button, refresh button, F5, Ctrl+R in javascript , How can i detect the back button and refresh button been click? to detect refresh (either F5, CTRL+R or the browser's button). window.onbeforeunload = function() { return "Dude, are you sure you want to refresh? Think of  If you are creating a single page app then onpopstate [code]window.onpopstate[/code] event is fired. And if it is a completely different page then you should look for alternative depending on your need.

/* Prevent accidental back navigation click */
history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
    let leavePage = confirm("you want to go ahead ?");
    if (leavePage) {
        history.back() 
    } else {
        history.pushState(null, document.title, location.href);
    }  
});

How to display an alert message when the browser Back button is , Yes you are right,when a navigation back button is pressed it should The DevExpress.ui.dialog.confirm method is a UI widget and it is a part of the DOM. Please refer to the how to stop browser back button using javascript  The confirm() method displays a dialog box with a specified message, along with an OK and a Cancel button. A confirm box is often used if you want the user to verify or accept something. Note: The confirm box takes the focus away from the current window, and forces the browser to read the message. Do not overuse this method, as it prevents the user from accessing other parts of the page until the box is closed.

Solution to browser back button click event handling, if(window.event) //Internet Explorer. {. alert("Browser back button is clicked on Internet Explorer");. } else //Other browsers e.g. Chrome. A confirmation box is displayed using the JavaScript confirm function. It contains a text message and two buttons, OK and Cancel. TestComplete records and plays back interactions with confirmation boxes using the Confirm test object. It also lets you get the confirmation message text using the Confirm.Message property.

How to get a browser back button event using JavaScript, Originally Answered: How do i get browser back button event using java script? create an alert box or dialog from scratch without depending on the browser? Alert dialog box is a pop-up window appearing on the browser only with a “OK” button to inform a very small message to the users. Alert box shall be used to display a warning message or an information message. For example: A welcome message to the user when the site is loaded. Validation result of an invalid result.

How to stop browser back button using JavaScript ?, There are so many ways to stop the browser back button most popular and will work How to Display Changed Browser URL Without Reloading Through alert Cross-browser window resize event using JavaScript/jQuery · How to detect the  Confirm Box. A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. Syntax

Comments
  • possible duplicate of Intercepting call to the back button in my AJAX application: I don't want it to do anything!
  • this is working but if i refresh my current page am getting blank page
  • The confirmation box returns true if the user selects the OK option. Therefore, your condition should be changed. Fx. if(leavePage)
  • It doesn't work in newer browsers because they no longer allow custom messages.
  • this didn't work for me either, i used window.onbeforeunload = function() ... and worked