After a long day of trying to find a solution to this problem, I keep getting the same issue.

Basically, I have a site, if the user clicks on the "browser-refresh" button, I want to pop-up a "are you sure" alert box with the options "reload" and "don't reload" (Basically, what the browser returns).

Surprisingly, it works just fine in IE. But in chrome or firefox, the refresh happens normally without a popup.

The popup only appears if I click on the body some where and then click on the "browser-refresh" button.

I already the following and other many similar alternatives :

window.onbeforeunload = function (e) {
    e = e || window.event;

   // For IE and Firefox prior to version 4
   if (e) {
       e.returnValue = 'Any string';
   }

  // For Safari
  return 'Any string';
};

I tried to simulate a click event on page load with 'trigger('click')', '.click()' events.

But, still doesn't work until I click on the body myself (physically).

I've created a short pen, which replicates the issue I'm facing.

Any help would be very highly appreciated. Thanks in Advance.

After a long day of trying to find a solution to this problem, I keep getting the same issue.

Basically, I have a site, if the user clicks on the "browser-refresh" button, I want to pop-up a "are you sure" alert box with the options "reload" and "don't reload" (Basically, what the browser returns).

Surprisingly, it works just fine in IE. But in chrome or firefox, the refresh happens normally without a popup.

The popup only appears if I click on the body some where and then click on the "browser-refresh" button.

I already the following and other many similar alternatives :

window.onbeforeunload = function (e) {
    e = e || window.event;

   // For IE and Firefox prior to version 4
   if (e) {
       e.returnValue = 'Any string';
   }

  // For Safari
  return 'Any string';
};

I tried to simulate a click event on page load with 'trigger('click')', '.click()' events.

But, still doesn't work until I click on the body myself (physically).

I've created a short pen, which replicates the issue I'm facing.

https://codepen.io/kanchanrai/pen/LQEZYV

Any help would be very highly appreciated. Thanks in Advance.

• javascript
• jquery
• cross-browser
• onbeforeunload

• Why would you need to do this in the first place? It's just annoying to users if there is no interaction with page and no valid reason to need to warn user – charlietfl Commented Jan 30, 2018 at 14:43
• 1 This was just an example and pointing out the exact issue. I saw these kinds of replies on almost all questions asked. This is required for a payment page that I'm working on a project. I can't elaborate more than that but just this, there's a valid reason the user needs to be warned. I'm all done except for that one part where the body needs to be clicked. – Kanchan Rai Commented Jan 31, 2018 at 2:55
• 2 Since Chrome 60: Require user gesture for beforeunload dialogs – Josh Lee Commented Sep 26, 2019 at 12:50

1 Answer 1

Maybe a late answer...

Here is what MDN documentation on beforeunload event states:

Note: To bat unwanted pop-ups, browsers may not display prompts created in beforeunload event handlers unless the page has been interacted with, or may even not display them at all.

This matches the behavior you observed.