CODEWITHSUNDEEP
javascriptjquery
Roxx
Roxx

Reputation: 3986

Alert on Browser Back button click or page refresh

I have seen the same function is multiple sites including SO. I am also trying to achieve this. Here is the code so far. 

 <script>
            var myEvent = window.attachEvent || window.addEventListener;
            var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; 

            myEvent(chkevent, function(e) { // For >=IE7, Chrome, Firefox
                var confirmationMessage = ' ';  
                (e || window.event).returnValue = confirmationMessage;
                return confirmationMessage;
            });
        </script>

The problem is above code is working fine in chrome and IE but when I tried to test in on Firefox it is not working. I checked firebug but there is no error. I updated the firefox and version are 47.0.1.

But issue not fixed.

Any advice would be helpful.

Guys if you have code better than this then it would be also helpful.

Upvotes: 4

Views: 29840

Answers (5)

Mher
Mher

Reputation: 1253

Try this

window.addEventListener('beforeunload', function (event) {
  event.preventDefault();

  event.returnValue = 'Are you sure you want to leave this page?';
});

Upvotes: 0

MD Ashik
MD Ashik

Reputation: 9835

It's work for me by this code.

window.onbeforeunload = function () {
    return 'Are you sure? Your work will be lost. ';
};

Upvotes: 1

Pamz
Pamz

Reputation: 11

window.onbeforeunload is a good way to go. But it seems to be working in Firefox only if user has interaction with the website (click or scroll). Otherwise function doesn't trigger. Chrome, on the other hand works great.

Note: To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with; some don't display them at all

Documentation

Upvotes: 0

shivgre
shivgre

Reputation: 1173

Well I tested this code and it is working on firefox and chrome even with firebug console closed :

     <script>
            window.onbeforeunload = function (e) {
                var message = "Are you sure ?";
                var firefox = /Firefox[\/\s](\d+)/.test(navigator.userAgent);
                if (firefox) {
                    //Add custom dialog
                    //Firefox does not accept window.showModalDialog(), window.alert(), window.confirm(), and window.prompt() furthermore
                    var dialog = document.createElement("div");
                    document.body.appendChild(dialog);
                    dialog.id = "dialog";
                    dialog.style.visibility = "hidden";
                    dialog.innerHTML = message;
                    var left = document.body.clientWidth / 2 - dialog.clientWidth / 2;
                    dialog.style.left = left + "px";
                    dialog.style.visibility = "visible";
                    var shadow = document.createElement("div");
                    document.body.appendChild(shadow);
                    shadow.id = "shadow";
                    //tip with setTimeout
                    setTimeout(function () {
                        document.body.removeChild(document.getElementById("dialog"));
                        document.body.removeChild(document.getElementById("shadow"));
                    }, 0);
                }
                return message;
            };
        </script>

I found this script crossbrowser-onbeforeunload.js. It is cross-browser compatible.

Upvotes: 2

shivgre
shivgre

Reputation: 1173

Use below code, I tested it in firefox and is working fine : 

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

Upvotes: 5

Related Questions