JavaScript How can we detect when user is going back using browser navigation back arrow button or history.back()?

[vishal]

I want to perform an action when user navigates from one page to another but i don't want to perform anything when user clicks on back arrow or basically goes to previous screen using browsers history.
Navigation is being done normally like using anchor tags or window.location.href.
I have tried storing referrer value in session storage but it fails when we navigate to the same previous page through different trigger like

Page A -> Page B -> Page A (through anchor tag click not back arrow) -> Page B (through anchor tag click not back arrow)

This above scenario fails when we store referrer value in session storage to find out that whether user is going back in history or not.

 

[Johna]

window.addEventListener("popstate", () => {
  // . . .
});

There's a popstate event. You may want to take a look into that.

Window: popstate event - Web APIs | MDN

The popstate event of the Window interface is fired when the active history entry changes while the user navigates the session history. It changes the current history entry to that of the last page the user visited or, if history.pushState() has been used to add a history entry to the history...

developer.mozilla.org

 

[vishal]

i cannot use popstate, popstate only works when there is no reload in moving forward. But in my case it reloads.

 

[vishal]

@vipulgupta
i liked the idea of adding this listener and it works but there is one issue with this one

document.addEventListener('click', function(event) {
var target = event.target;
if (target.tagName === 'A' || target.getAttribute('data-navigation')) {}

let's say the anchor tag is inside a div or any other tag ... in that case event.target will not be anchor tag right?

 

[Malcolm]

To determine if a user is navigating from one page to another without using the browser's back arrow or history, you can leverage the JavaScript History API. The History API provides methods and events to manipulate and track the browser history.

Here's an approach you can follow:

1. Use the pushState() method: Instead of relying solely on anchor tags or window.location.href, use the pushState() method of the History API to update the browser history when navigating to a new page. This will allow you to control the history stack.
2. Attach an event listener: Add an event listener to capture navigation events triggered by user actions. For example, you can listen for clicks on anchor tags or other elements that trigger page changes.
3. Detect navigation events: When a navigation event occurs, check if it was triggered by user interaction or by using the back arrow or history. To differentiate between the two, you can set a custom flag or data attribute on the elements that trigger page changes, indicating that the navigation is user-initiated.
4. Use the popstate event: When the user clicks the back button or uses the browser's history, the popstate event is fired. You can listen for this event and perform your desired action when it occurs.

Here's a simplified example to illustrate this approach:

// Attach event listener to capture navigation events
document.addEventListener('click', function(event) {
var target = event.target;

// Check if the click is on an anchor tag or other elements that trigger page changes
if (target.tagName === 'A' || target.getAttribute('data-navigation')) {
// Set a custom flag or data attribute to indicate user-initiated navigation
target.setAttribute('data-navigation', 'true');

// Update the browser history using pushState()
history.pushState(null, null, target.href);

// Perform desired action for user-initiated navigation
// ...
}
});

// Listen for the popstate event
window.addEventListener('popstate', function(event) {
var isUserInitiatedNavigation = event.state === null;

if (!isUserInitiatedNavigation) {
// Perform desired action for browser history navigation (e.g., going back)
// ...
}
});


By setting a custom flag or data attribute and using the popstate event, you can differentiate between user-initiated navigation and browser history navigation, allowing you to perform specific actions accordingly.

Thanks for sharing. Just remember to place your code in the proper BBCode. It makes it easier to view code. You can use markdown or click the </> icon to format your code using BBCode.