如何显示离开网站？仅在函数完成执行后提示卸载事件

Question

我必须在页面关闭事件中执行同步ajax方法，但现代浏览器不再支持在beforeunload事件中执行同步方法。

为此我已经实现了一个新的承诺，只有在 ajax 方法完成执行后才会解决，它在按钮点击时工作正常。

但是在页面beforeunload事件中，由于提示“离开站点？所做的更改可能无法保存”，函数停止执行。

当用户点击离开时，它不会被执行。

有什么建议吗？

//Index.html

<button type="button" onclick="checkAjaxWithAsync()">Check with Async</button>

//Index.js

    var isUpdated = false;

    var interval;
    var data;
    var newHandle;
    //Save report as HTML with file name...

    $(document).ready(function () {

        $(window).on("beforeunload", async function (event) {
            await checkAjaxWithAsync();
        })
    })

    
     function ajaxCall() {

        $.ajax({
            type: 'POST',
            url: '@(Url.Action("CheckAjax"))',
            async: true,
            success: function (result) {
                console.log(result)
                isUpdated = true;
                clearInterval(interval);
            },
            error: function () {
                debugger;
            }
        }).done(function () {
            console.log('After done')
        });

        console.log('After ajax');

    }

    async function checkAjaxWithAsync() {
        isUpdated = false;
        await processFunction();
        console.log('is updated:',isUpdated)
        console.log('Hi From Do IT')
    }

    async function waitUntil() {
        return await new Promise(resolve => {
            const interval = setInterval(() => {
                if (isUpdated) {
                    resolve('completed');
                    clearInterval(interval);
                };
            }, 1000);
        });
    }

    async function processFunction() {
        
        ajaxCall();
        await waitUntil()
        
        console.log('after interval')
    }

//HomeController.cs


public class HomeController : Controller
    {
        
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public string CheckAjax(object data)
        {
            System.Threading.Thread.Sleep(1000 * 10);
            return "Hello";
        }
    }

Answer 1

根据您的描述，恐怕这个需求是无法实现的。因为这是内置行为，旨在仅允许出于安全目的进行非常小的更改。

beforeunload 的主要目的是允许用户选择在更改丢失之前保存更改。

如何显示离开网站？仅在函数完成执行后提示卸载事件

How to show leave site? prompt in before unload event only after a function completes its execution

javascript

ajax

asp.net-mvc

google-chrome

microsoft-edge