Trigger event when user clicks the browsers back button

Question

Is it possible with jquery to trigger a function when the user clicks the browsers back button. I have a lightbox/widget that when open fills the window when it is open. There is a close button etc but this would be good if this closed if a user hit the back button by mistake.

I have this so far but the function doesnt seem to run at all

$(window).on("navigate", function (event, data) {
            event.preventDefault();
            console.log('BACK PRESSED');
            var direction = data.state.direction;
            if (direction === 'back') {
                if(widgets.full_active){
                    $('.close', widgets.active_widget).click();
                    event.preventDefault();
                    console.log('CLOSE THIS');
                }
            }
            if (direction === 'forward') {
                // do something else
            }
        });

By not running this line at the start of the function event.preventDefault(); should mean the page never changes

^ but note that the event also fires when the tab/window is closed, or the user navigates to another site. There's no way to know when the unload event was raised by a back button click alone — Rory McCrossan, Jul 06 '16 at 12:23
http://stackoverflow.com/questions/3522090/event-when-window-location-href-changes same concept — Sander Sluis, Jul 06 '16 at 12:25

score 0 · Answer 1 · answered Jul 06 '16 at 12:37

Usually, I do this using the native JavaScript API from the browser, like described here: Manipulating the Broser History.

With jQuery, I see people usually using this plugin: History.js, although I have no idea what is it's status.

The event you're looking for is onpopstate.

A popstate event is dispatched to the window every time the active history entry changes between two history entries for the same document.

Trigger event when user clicks the browsers back button

1 Answers1