在页面导航时使用 jQuery BlockUI 插件（卸载事件）答案

【问题标题】：Using jQuery BlockUI plugin upon page navigation (unload event)在页面导航时使用 jQuery BlockUI 插件（卸载事件）
【发布时间】：2013-06-28 12:28:30
【问题描述】：

jQuery BlockUI 插件有一个非常酷的功能，它可以通过简单的代码将自己附加到每个 AJAX 调用：

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

我可以使用类似的方法在每个导航上显示 blockUI 覆盖，例如单击任何链接等吗？

我认为，这应该使用unload 事件来完成，但我失败了。

$(window).on('unload', function()
{
    $.blockUI;
});

在导航块UI覆盖不出现（我不在乎隐藏它，因为新加载的页面不会有它）。

我什至可以：

$(window).on('unload', function()
{
    console.log('$.blockUI;');
    $.blockUI;
    console.log('Bye!');
});

我在控制台中清楚地看到$.blockUI; 和Bye! 消息，但没有blockUI 覆盖的迹象。

我读过很多浏览器会阻止在unload 中显示alert()。它是否也涵盖了blockUI？不应该，因为它只是一堆 div 或其他 DOM 元素加上一些样式？

在 Chrome 27、Internet Explorer 10 和 Firefox 21 中测试。我遗漏了什么或做错了什么？

两三年前，在一个旧项目中，我设法实现了上述功能，但它纯粹是通过将 blockUI 显示到特定按钮和菜单项来完成的。我想尽可能避免这种情况，并使其成为全球性的，就像 AJAX 调用一样。

【问题讨论】：

【解决方案1】：

我认为有两个问题。我认为第一个问题是您必须调用函数$.blockUI() 才能产生所需的结果。

第二个问题是事件似乎为时已晚。考虑beforeunload事件：

$(window).on('beforeunload', function()
{
    $.blockUI();
});

我创建了一个使用beforeunload 事件的jsfiddle，并且效果很好。

【讨论】：