Javascript How to call a function when we choose Stay on Page in Chrome

Question

Please check my code in Chrome Browser, if you hit refresh you will be prompted with 2 options.

Leave This Page and

Stay on This Page

When I click the 2. Stay on this page button it must activate my custom function displayMsg()

Can any one provide me solution?

<script type="text/javascript">
function displayMsg() {
    alert('my text..');
}
</script>
<script type="text/javascript">
window.onbeforeunload = function(evt) {
  var message = 'Please Stay on this page and we will show you a secret text.';
  if (typeof evt == 'undefined') {
      evt = window.event;
  }       
  if (evt) {
      evt.returnValue = message;
      return message;
  }
  trace(evt);
} 
</script>

score 7 · Accepted Answer · answered May 16 '12 at 12:43

7

use a timer to listening for change variable :

var vals=0;
function displayMsg() {
    alert('my text..');
}
window.onbeforeunload = function evens(evt) {
var message = 'Please Stay on this page and we will show you a secret text.';
  if (typeof evt == 'undefined') {
      evt = window.event;
  }       
    timedCount();
    vals++;
  if (evt) {
      evt.returnValue = message ;
      return message ;
  }
  trace(evt);
} 

function timedCount()
{
t=setTimeout("timedCount()",100);
if(vals>0)
{
    displayMsg();
    clearTimeout(t);
}
}

answered May 16 '12 at 12:43

M Rostami

3,351
1
31
37

also look at this [listening-for-variable-changes-in-javascript-or-jquery](http://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript-or-jquery) – M Rostami May 16 '12 at 12:44
1

Excellent Script! Thanks a lot for taking time to even include my displayMsg() function and making it easy to use directly without further modifications :) – Me 4U May 16 '12 at 15:13
Thank you 'Perdickss', your code works even on IE browser too! – Me 4U May 16 '12 at 15:41

Andy E · Answer 2 · 2012-05-16T13:08:58.317

5

You can use a combination of the onbeforeunload and onunload events, setting a timer in the former and clearing it in the latter:

var showMsgTimer;

window.onbeforeunload = function(evt) {
    var message = 'Please Stay on this page and we will show you a secret text.';
    showMsgTimer = window.setTimeout(showMessage, 500);

    evt = evt || window.evt;
    evt.returnValue = message;

    return message;
}

window.onunload = function () {
    clearTimeout(showMsgTimer);
}

function showMessage() {
    alert("You've been trolled!");
}

This works because the onunload event never fires when the user chooses to stay on the page.

edited May 16 '12 at 13:08

answered May 16 '12 at 10:56

Andy E

311,406
78
462
440

op wants "When I click the 2. Stay on this page button it must activate my custom function displayMsg()", not the leave page – Ravi Gadag May 16 '12 at 11:16
@Ravi: if you read the code or tested it, you would see that is exactly what it does. If you choose to stay on the page it shows a message. If you leave, it doesn't. – Andy E May 16 '12 at 13:01
i agree, but it will invoke when u click on leave the page also. check it here http://jsfiddle.net/VuPcf/ – Ravi Gadag May 16 '12 at 13:06
1

@Ravi: the timer just needs tweaking a little. 100ms worked for me in local testing, but not in your jsFiddle example. Changing it to a higher value, e.g. 500ms, fixes the problem. Additional tweaking may be required, but the solution is pretty much the best option. – Andy E May 16 '12 at 13:11
Excellent! This is exactly what i was looking for. Thank you Andy! :) – Me 4U May 16 '12 at 15:12

score 1 · Answer 3 · answered Jul 07 '14 at 06:55

Please use these lines of code , it works properly.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script type="text/javascript">
    $(function(){
    $(window).bind('beforeunload', function(){
      return 'Your Data will be lost :(';
     });
    });
    </script>

Javascript How to call a function when we choose Stay on Page in Chrome

3 Answers3

Linked