时间戳

首页 > 解决方案 > 如何在选项卡/浏览器关闭时调用 .NET MVC 操作？

jquery - 如何在选项卡/浏览器关闭时调用 .NET MVC 操作？

问题描述

作为 MVC Web 应用程序的一部分，我需要在浏览器或浏览器选项卡关闭时调用控制器方法。我正在使用 Javascriptonbeforeunload事件来调用该方法。

 window.onbeforeunload = function () {
            navigator.sendBeacon("/ABC/RemoveSession");
        }

如果在表单中进行了一些更改并且用户尝试退出，我将使用以下代码显示确认窗口

        function preventNavigation(message) {
            var confirmOnPageExit = function (e) {
                // If we haven't been passed the event get the window.event
                e = e || window.event;
                // For IE6-8 and Firefox prior to version 4
                if (e) {
                    e.returnValue = message;
                }
                // For Chrome, Safari, IE8+ and Opera 12+
                return message;
            };

            window.onbeforeunload = confirmOnPageExit
        }

$("#myform :input").change(function () {

       preventNavigation("You have not saved the form. Any changes will be lost if you leave this page.");
           
        });

如果表单没有变化并且标签页关闭，代码工作正常，Controller方法调用成功。但是，如果表单已更改，用户会在尝试关闭表单时弹出确认消息。单击“离开”按钮时，选项卡会关闭，但不会调用控制器方法。

我怀疑这是否可以通过onbeforeunload事件来完成。如果有人曾经遇到过这样的问题或知道任何更好的方法来实现这一点，请告诉我。

标签： jqueryasp.net-mvcmodel-view-controllerjquery-events

解决方案

Navigator.sendBeacon()旨在与visibilitychange事件一起使用，而不是 onbeforeunload.

MDN 声明：

避免卸载和卸载前

过去，许多网站使用 unload 或 beforeunload 事件在会话结束时发送分析。然而，这是极不可靠的。在许多情况下，尤其是在移动设备上，浏览器不会触发 unload、beforeunload 或 pagehide 事件。例如，这些事件不会在以下情况下触发：

  1. 用户加载页面并与之交互。
  2. 完成后，他们会切换到不同的应用程序，而不是关闭选项卡。
  3. 稍后，他们使用手机的应用管理器关闭浏览器应用。

...

代替：

window.onbeforeunload = function() {
    navigator.sendBeacon("/ABC/RemoveSession");
}

和：

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon("/ABC/RemoveSession");
  }
});

推荐阅读