仅当'beforeunload'函数返回true时才运行Javascript代码 [英] Run Javascript code only if 'beforeunload' function returns true

问题描述

当用户离开页面时，我正在使用JQuery来捕获卸载事件。这很好用，但我的数据只有在用户真的想要离开的情况下才需要保存。

I'm using JQuery to capture the unload event when a user navigates away from a page. This works just fine, but I have data that needs to be saved only in the event that the user really wants to leave.

这是我的22条军规。如果我过早保存代码并且用户不想离开，我已经破坏了支持代码的Web服务的状态。

Here's my catch-22. If I save the code too early and the user doesn't want to leave, I've spoiled the state of the web service backing the code.

因此，只有当'beforeunload'对话框返回true时，才需要完成执行代码的近乎难以逾越的任务。

Therefore I need to accomplish the near insurmountable task of executing code only if the 'beforeunload' dialog returns true.

$(window).on('beforeunload', function(e) {
    var info = * some info to save the current page state *
    return 'Are you sure you want to navigate away from the Test Runner?';

    //unreachable place where I wish I could ajax 'info' back to safety
});

此代码将弹出一个对话框，询问'你确定要导航离开如果用户点击取消，则会阻止用户离开页面。

This code as is will pop up a dialog that asks 'Are you sure you want to navigate away from the Test Runner?' and if the user clicks cancel will prevent the user from leaving the page.

这是另一个想法：

$(window).on('onunload', function(e) {
    var info = * some info to save the current page state *
    var r=confirm('Are you sure you want to stop the Test Runner?');
    if(r==true)
    {
        //place where I wish I could ajax 'info' back to safety
        return 'leaving'
    }
    else
        return 'leaving unsaved';
});

第二种方法不会阻止用户离开任何一种方式，但在一种情况下会执行一些保存代码首先，在另一个将它们引导回冷。这种方法的问题在于大多数浏览器（理所当然地）阻止确认框在window.onunload状态下启动，这要归功于多年的90年代网络开发人员使用它来阻止糟糕的拨号网络冲浪者。

This second method will not prevent the user from leaving either way, but in one case will execute some save code first, and in the other will boot them back out into cold. The issue with this approach is that most browsers (rightfully) prevent confirm boxes from launching in the window.onunload state thanks to years of 90's web developers blindsiding poor dial-up web surfers with it.

免责声明： 我很清楚，我们网络开发人员社区强烈反对阻止用户在尝试执行时阻止页面在后台执行代码它。当我看到类似的问题时，如何阻止用户离开我真棒的网站我的下意识反应通常是不要这样做！这说不同。这是针对特定客户的专用页面，我们需要将其作为恐慌预防措施。我保证，我是其中一个好人。我是你的一员。

A disclaimer: I'm well aware that we in the web developer community strongly discourage preventing the user from leaving a page and executing code in the background as they try to do it. When I see questions like, "How do I prevent a user from leaving my really awesome website" my knee-jerk reaction is typically, "don't do it!" That said this is different. This is a specialized page for a particular client and we need this as a panic-prevention measure. I'm one of the good guys, I promise. I'm one you.

推荐答案

尝试使用这两个事件。你需要的是同一范围内的共享变量，而不是全局变量。在对话框出现之前将触发 onbeforeunload 。 onunload 只有在用户点击退出窗口/标签时才会被触发。

Try to use both events. What you need is a shared variable in the same scope, not to say global variable. onbeforeunload will be fired before the dialog appears. onunload will only be fired if the user clicked to escape the window/tab.

// Use a variable in the same scope of both events:
var savedState;

$(window).on('beforeunload', function(e) {

  savedState = "what the user currently made";

  return "Sure U are?";
});

$(window).on('unload', function(e) {

  // user didn't save!!
  // your auto-save function:
  auto_save(savedState);

  // browser leaves this tab.
});

作为范围，我的意思是像（function（）{}） （）; 或任何其他（构造函数或函数）函数。

As a scope, I mean something like (function () { })(); or any else (constructor or functional) function.

这篇关于仅当'beforeunload'函数返回true时才运行Javascript代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！