javascript - Handle Back button with Angular [Chrome] - Stack Overflow

admin管理员组

文章数量:1393380

I am creating a project using angular, In my application I need to handle back button event. Below is the code which is working fine apart from one scenario

Code:

this.location.subscribe(event => {
 //logout
});
history.pushState({}, '');

This code only works when user is perform some activity, if user just landed on page and click back button then this event is not captured. I tried all the ways but not works.

I am creating a project using angular, In my application I need to handle back button event. Below is the code which is working fine apart from one scenario

Code:

this.location.subscribe(event => {
 //logout
});
history.pushState({}, '');

This code only works when user is perform some activity, if user just landed on page and click back button then this event is not captured. I tried all the ways but not works.

• javascript
• angular
• google-chrome

Share Improve this question Follow edited Oct 7, 2021 at 12:02 Karan asked Oct 7, 2021 at 9:35 KaranKaran 1,11844 gold badges2020 silver badges4545 bronze badges 1

• what do you need to handle back button exactly for? If you use the router as the primary source of truth I see little cases where you'd need that – maxime1992 Commented Dec 1, 2021 at 10:31

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 0

A simple way is to add the popstate event, every time when user click on the back button. It will be fired.

window.addEventListener('popstate', (event) => {
    // The popstate event is fired each time when the current history entry changes.

    // logout or do any thing you like

}, false);

If this doesn't work you could go for Angular Router and check which event is called.

constructor(router: Router) {
    router.events
      .subscribe((event: NavigationStart) => {
        if (event.navigationTrigger === 'popstate') {
          // Perform actions
        }
      });
}

This solves the problem for me, captured even when no activity by user

@HostListener('window:popstate', [$event])
onPopState(event: any) {
  console.log('Event', event);
}

PS: tested in Chrome

You can try to override the whole onpopstate like this

window.onpopstate = function () {
  // Your logic should be here...
}.bind(this); // This line is to bind the ponents

I think that before the user interacts with the web page, beforeunload is fired and the page will be unloaded before you can catch popstate. Combined together, they seems to be working.

Note that you won't be able to pletely override browser behavior as a security feature.

https://angular-ivy-pbvgpj.stackblitz.io/

export class AppComponent {
  name = 'Angular ' + VERSION.major;
  backButtonClicked = false;

  ngOnInit(): void {
    history.pushState(null, document.title, location.href);
  }

  @HostListener('window:popstate', ['$event']) onClickBack(
    event: PopStateEvent
  ) {
    history.pushState(null, document.title, location.href);
    this.backButtonClicked = true;
  }

  @HostListener('window:beforeunload', ['$event']) onBeforeUnload(
    event: BeforeUnloadEvent
  ) {
    history.pushState(null, document.title, location.href);
    this.backButtonClicked = true;
  }
}

Stackblitz

本文标签： javascriptHandle Back button with Angular ChromeStack Overflow