Stop showing confirm box upon page reload - Javascript

Question

I want to ask for a confirmation to the user when they are leaving a page.

I know it can be achieved very easily using javascipt's window.onbeforeunload

But the only issue is, it shows a pop up(see picture) when I reload the page. I don't want to display that pop up upon page reload. I think that pop-up is displaying by the web browser as it shows a message "Do you want to reload this site?" which I have not written anywhere.

Here is my simple code:

<html>
    <head>
        <title>Script</title>
        <script>
            window.onbeforeunload = function () {
                return 'Are you sure you want to leave?';
            };
        </script>
    </head>
    <body>
        hello
        <a href="http://google.com">Google</a>
    </body>
</html>

Any help would be appreciated.

EDIT:

Lots of people saying that it is bad to ask user while he is leaving the site and I'm also completely agreed with that. But it is client's requirement, so it is not up to me. Sorry for that.

Thanks,

Parth vora

i think refresh means leaving the site and coming back to site . so leaving site means it will alert — Mahi, Dec 08 '16 at 11:03
`I don't want to display that pop up upon page reload` So what do you want. — Manish, Dec 08 '16 at 11:04
Upon refresh, just reload the page as usual, no need to ask to the user. — Parth Vora, Dec 08 '16 at 11:04
@Manish he want alert when user close tab not when user refresh tab — Mahi, Dec 08 '16 at 11:05
`when use close tab` - the question clearly states when `leaving the site` ... not `closing the tab` — Jaromanda X, Dec 08 '16 at 11:06
Possible duplicate of [Using javascipt to pop up a message when a user leaving a page](http://stackoverflow.com/questions/17582719/using-javascipt-to-pop-up-a-message-when-a-user-leaving-a-page) — Liam, Dec 08 '16 at 11:07
@ParthVora you can't determine whether user: Attempted to refresh page. Attempted to close browser tab. Attempted to close browser window. Inputted another URL in the URL bar and hit enter. All these actions generate beforeunload event on window, without any more exact information about the event how it is triggered or what action triggered it. But yes you can detect hyperlink clicks and and avoid this popup when someone clicks a hyperlink. Thats the only possibility you have right now. So to your exact problem no solution exists as of now. — Manish, Dec 08 '16 at 11:24
@ParthVora I provided a more practical solution. Chek out my edited answer — sabotero, Dec 09 '16 at 12:25
Possible duplicate of [window.onbeforeunload executed on page refresh instead of on page close](https://stackoverflow.com/questions/20740652/window-onbeforeunload-executed-on-page-refresh-instead-of-on-page-close) — Stéphane Bruckert, Apr 23 '18 at 09:14

sabotero · Answer 1 · 2016-12-09T12:36:18.017

This should work.

In chrome your custom messages won't be shown as explained here

The custom message may also not work for Firefox:

<html>
    <head>
        <title>Script</title>
        <script>
            var navigating = false;
            window.onbeforeunload = function (e) {

                if(!navigating){
                    return null;
                }
                navigating = false;
                var e = e || window.event;

                  // For IE and Firefox
                  if (e) {
                    e.returnValue = 'àààà Are you sure you want to leave?';
                  }

                  // For Safari               
                return ' àààà Are you sure you want to leave?';
            };
            function navigate(url){
                navigating = true;
                setTimeout(function(){ window.location = url; }, 0);
            }
            window.onload = function(){
                var as = document.getElementsByTagName("a");
                var navigateToUrl = function(e){
                    var element = e.target;
                    var url = element.getAttribute("data-href");
                    navigate(url);
                };
                for(var i = 0; i < as.length; i++){
                    as[i].onclick= navigateToUrl;
                }
            }
        </script>
    </head>
    <body>
        hello
        <a href="#" data-href="http://google.com">Google</a>
    </body>
</html>

well, @Liam I have edited my answer. And I do answered the question. — sabotero, Dec 08 '16 at 11:29
So you want the OP to add a javascript funtion to every link on his web page? This is not going to be practical surely? — Liam, Dec 08 '16 at 11:33
@sabotero. Thanks a lot. It worked. I will definitely upvote this but sorry I can't accept the answer as in my case it is not possible to add javascript functions to each links. — Parth Vora, Dec 08 '16 at 12:40
@ParthVora you can surely now accept my answer, I have edited the answer with a more practical solution. — sabotero, Dec 09 '16 at 12:38

score -2 · Answer 2 · answered Dec 08 '16 at 11:08

That popup is the browser's default popup. I don't think it can be removed. However, you can try triggering the enter key using javascript. By default, Reload is selected, so pressing the enter key will click Reload and reload the page.

I haven't tried it myself, but might just work.

Stop showing confirm box upon page reload - Javascript

2 Answers2