Leave site alert when closing browser using angular Shows Error Blocking Alert on beforeunload and unload

Question

How to achieve Leave site alert using Angular when user try to close the browser

I tried using Hostlistener beforeunload and unload.

I paused by debugger i checked. It showing the below error the

1) Blocking Alert After beforeunload 2) Blocking Alert After unload

@HostListener('window:onbeforeunload ', ['$event']) beforeunloadHandler(event) { alert('fffff') } — Angular doubt, Jun 06 '19 at 11:46
What does the first note say in the documentation? https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload — Reactgular, Jun 06 '19 at 11:54
Possible duplicate of [How can we detect when user closes browser?](https://stackoverflow.com/questions/37642589/how-can-we-detect-when-user-closes-browser) — zero298, Jun 06 '19 at 11:55
@arjun when developer tool is open its working . when its closed it not working — Angular doubt, Jun 06 '19 at 13:05

Ishan Bhatt · Answer 1 · 2019-06-06T12:27:31.977

0

You can use unload and beforeunload events to when you want to deal with this kind of issues.Below is the code will help you to get solution.

export class AppComponent {
  @HostListener('window:unload', [ '$event' ])
  unloadHandler(event) {
    //If you want to do something when page gets reloaded or on leaving page
  }

  @HostListener('window:beforeunload', [ '$event' ])
  beforeUnloadHander(event) {
    return false;
  }
}

I hope you will get your solution.

edited Jun 06 '19 at 12:27

answered Jun 06 '19 at 11:55

Ishan Bhatt

54
10

thank you for your answer .but its not working with by code – Angular doubt Jun 06 '19 at 12:01
i checked in debugger. it showing Blocked alert during beforeunload. homes:1 Blocked alert during unload. – Angular doubt Jun 06 '19 at 12:13
code working fine but alert is blocking . thats why – Angular doubt Jun 06 '19 at 12:14
You can use `return false;` instead of alert.For this I have also edited my code. @Angulardoubt – Ishan Bhatt Jun 06 '19 at 12:27
When developer tool is opened its working fine . when it's close its not working – Angular doubt Jun 06 '19 at 13:04
You can go mentioned link [here](https://stackblitz.com/edit/angular-phh712).I have written code in stackblitz. You can check it. – Ishan Bhatt Jun 06 '19 at 13:15
I think this is browser specific issue.Can you please try in Firefox.I have just tested it.It works fine in Firefox.@Angulardoubt – Ishan Bhatt Jun 06 '19 at 13:23

Leave site alert when closing browser using angular Shows Error Blocking Alert on beforeunload and unload

1 Answers1