Javascript 当我们在 Chrome 中选择停留在页面时如何调用函数答案

【问题标题】：Javascript How to call a function when we choose Stay on Page in ChromeJavascript 当我们在 Chrome 中选择停留在页面时如何调用函数
【发布时间】：2012-05-16 10:13:33
【问题描述】：

请在 Chrome 浏览器中检查我的代码，如果您点击刷新，系统会提示您提供 2 个选项。

离开此页面并

留在本页

当我点击 2.停留在此页面按钮，它必须激活我的自定义函数displayMsg()

谁能给我解决方案？

<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>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

使用计时器来监听变化变量：

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);
}
}

【讨论】：

也看看这个listening-for-variable-changes-in-javascript-or-jquery
优秀的脚本！非常感谢您花时间包含我的 displayMsg() 函数并使其易于直接使用而无需进一步修改:)
谢谢'Perdickss'，你的代码甚至可以在IE浏览器上运行！

【解决方案2】：

您可以使用onbeforeunload 和onunload 事件的组合，在前者中设置计时器并在后者中清除它：

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!");
}

这是因为当用户选择留在页面上时，onunload 事件永远不会触发。

【讨论】：

op 想要“当我单击 2. 停留在此页面按钮时，它必须激活我的自定义函数 displayMsg()”，而不是离开页面
@Ravi：如果您阅读代码或对其进行测试，您会发现这正是它的作用。如果您选择留在页面上，它会显示一条消息。如果你离开，它不会。
我同意，但是当你点击离开页面时它也会调用。在这里查看jsfiddle.net/VuPcf
@Ravi：计时器只需要稍微调整一下。 100ms 在本地测试中对我有用，但在您的 jsFiddle 示例中却没有。将其更改为更高的值，例如500ms，解决问题。可能需要进行额外的调整，但该解决方案几乎是最佳选择。
太棒了！这正是我想要的。谢谢安迪！ :)

【解决方案3】：

请使用这几行代码，它可以正常工作。

<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>

【讨论】：