在 beforeunload 期间提交，也许谁知道另一种方法解决方案答案

【问题标题】：submit during beforeunload, maybe who knows radically another method solution在 beforeunload 期间提交，也许谁知道另一种方法解决方案
【发布时间】：2013-02-05 14:27:01
【问题描述】：

在 stackoverflow.com 上查看了许多类似的问题（也在其他资源上），但没有找到答案。所以我简化和概括了问题。这似乎是显而易见的解决方案：

$(document).ready(function() {
    var a = 3;
    var b = 5;

    // no message when pressed submit button
    $('form').submit(function() {
        $(window).off('beforeunload');
    });

    // confirm of the need to save
    $(window).on('beforeunload', function(e) {
        if (a != b)
            if (confirm('You changed data. Save?')) {
                $('form').submit();
                // alert('Your data is saved. (With alert submit() work only in FireFox!?)');
            }
    });
});

但不提交作品。如果你使用 alert()，它只在 FireFox 中有效。我想更正（可能没有延迟）跨浏览器解决方案。也许谁知道从根本上另一种方法解决方案。

附：在第一部分这里描述的一些原创性 beforeunload：https://stackoverflow.com/a/6065085/1356425，但这不是解决方案明显的功能。

【问题讨论】：

我相信实现这一点的唯一方法是通过同步 AJAX（如果您愿意，只需 JAX）调用提交您的表单，因为任何异步调用都会在页面卸载时中断。跨度>

标签： javascript jquery submit onbeforeunload confirm

【解决方案1】：

Chrome 和 Firefox 在 onbeforeunload 事件之后阻止提交。你必须使用

$(window).on('beforeunload', function(e) {
        if (a != b)
            return 'You\'ve changed the data. Leave page anyway?';
        }                
    });

【讨论】：

很好，但不是跨浏览器的解决方案。不要在 Opera、Konqueror 中给出想要的结果，... 并且 FireFox 将显示另一条（自己的系统）确认消息。

【解决方案2】：

我使用同步 AJAX (JAX) 请求并为相应浏览器的 onUnload 或 onBeforeUnload 事件运行一次处理程序。此解决方案具有单一且几乎跨浏览器的行为。

示例 (on jsfiddle)：

$(document).ready(function() {

    var form = $('form');
    var textareas = $('textarea');

    function array_compare(a_0, a_1) {
        if(a_0.length != a_1.length)
            return false;

        for(i = 0; i < a_0.length; i++)
            if(a_0[i] != a_1[i])
                return false;

        return true;
    }

    var flag = false; // flag to control the execution of the unloadHandler() once
    var a_open = []; // array with data before unload

    $('textarea').each(function(index) {
        a_open.push($(this).val());
    });

    function unloadHandler() {
        if (flag)
            return;

        var a_close = []; // array with data during unload
        $('textarea').each(function(index) {
            a_close.push($(this).val());
        });

        if (!array_compare(a_open, a_close)) {
            if (confirm('You changed the data, but not saved them. Save?')) {
                $.ajax({
                    type: 'POST',
                    url: '/echo/json/',
                    async: false,
                    data: form.serialize()/* {
                        json: JSON.stringify({
                            text: 'My test text.'
                        }),
                        delay: 3
                    } */,
                    success: function(data) {
                        if (data) {
                            console.log(data);
                            alert('All data is saved!');
                        }
                    }
                });
            }
        }

        flag = true;
    }

    // For FireFox, Chrome
    $(window).on('beforeunload', function () {
        unloadHandler();
    });

    // For Opera, Konqueror
    $(window).unload(function() {
        unloadHandler();
    });

    // Without message when pressed submit button
    $('form').submit(function() {
        $(window).off('beforeunload');
        $(window).off('unload');
    });

});

【讨论】：

【解决方案3】：

在卸载时提交数据的最佳方式是将其存储在本地存储中，并在下次请求同源下的任何其他页面时发送。

  function sendBeacon(data) {

    data?dataArr.push(data):'';

    for (var i = 0, len = dataArr.length; i < len; i++) {
        $.getScript(dataArr[i], (function (index) {
            dataArr.splice(index, 1) //Updata dataArray on data submission
        }(i)))
    }
}

$(window).on('beforeunload', function () {
    localStorage.setItem('dataArr', JSON.stringify(dataArr));
})

var dataArr = JSON.parse(localStorage.getItem('dataArr'));

if (!dataArr) {
    dataArr = []; // Create Empty Array
} else {
    sendBeacon(dataArr); //Submit stored data
}

【讨论】：