Question

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

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

因此，只有在'beforeunload'对话框返回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
});

此代码将弹出一个对话框，询问“你确定要离开Test Runner吗？”如果用户点击取消将阻止用户离开页面。

这是另一个想法：

$(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年代网络开发人员用它来掩盖糟糕的拨号网络冲浪者。

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

Answer 1

尝试使用这两个事件。你需要的是同一范围内的共享变量，而不是全局变量。在对话框出现之前将触发onbeforeunload。仅当用户单击以转义窗口/选项卡时才会触发onunload。

// 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 () { })();或其他任何（构造函数或函数）函数。

Answer 2

经过测试并使用chrome。

$(window).on('beforeunload', function () {
   return 'Are you sure you want to navigate away from the Test Runner?';
});
$(window).on('unload', function () {
   $.ajax({ url: '/default.aspx', async: false });
});

Answer 3

刚遇到你现在的经历

以下链接是此问题的一个很好的参考。

https://developer.mozilla.org/en-US/docs/Web/Events/unload

＆＃34;文档处于特定状态：

所有资源仍然存在（img，iframe等）
最终用户不再可见
UI交互无效（window.open，alert，confirm etc.）
错误无法停止卸载工作流程＆＃34;

所以你不能在beforepageunload之后解雇任何东西，因为它不会产生任何返回值

仅当'beforeunload'函数返回true时才运行Javascript代码

3 个答案: