CODEWITHSUNDEEP
javascriptjquery
user3909863
user3909863

Reputation: 401

Avoid popup on refresh. show only when user close browser window

I want to show popup only when user close the browser window. But, In the following code. It showing popup when I refresh the page.

My Code

<script type="text/javascript">
    $(document).ready(function()
    {
        var key = true;
        $(window).bind('beforeunload', function(e){
            if(key)
             return confirm("Do you really want to close? This will log you out of your profile."); 
         e.preventDefault()
        }); 
        $(document).on("click","a",function() {
          key=false; 
        });    
    });
</script>

Upvotes: 0

Views: 2883

Answers (2)

Md. Arafat Al Mahmud
Md. Arafat Al Mahmud

Reputation: 3214

If you set onbeforeunload callback, it will be executed every time whether you close the tab or refresh the page. So, lets get into some hack here. When we close the tab, the window loses its focus. So Inside onbeforeunload we will just check if the window has focus. If it has, you are refreshing the page. If it has lost focus, probably you have closed the tab.

window.onbeforeunload=function(){
    if(!document.hasfocus()){
        //show popup
    }
}

Upvotes: 1

Paul
Paul

Reputation: 111

This is essentially what you need.

Source: open a custom popup on browser window/tab close

JSFiddle: http://jsfiddle.net/SQAmG/5/ 

var popit = true;
window.onbeforeunload = function() { 
     if(popit == true) {
          popit = false;
          return "Are you sure you want to leave?"; 
     }
}

EDIT

Use HTML5 Web Storage to simulate sessions within the browser. Here you would want to use sessionStorage rather than localStorage so the session ends when the browser window is completely closed.

If the sessionStorage variable is set, do not start the popup, otherwise allow the popup code to execute.

HTML5 Web Storage: http://www.w3schools.com/html/html5_webstorage.asp

Upvotes: 1

Related Questions