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

Question

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

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

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

我认为，这应该使用unload事件来完成，但我没有用这个。

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

导航时没有出现blockUI覆盖（我不关心隐藏它，因为新加载的页面不会有它）。

我甚至可以：

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

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

我读过许多浏览器在alert()中阻止显示unload。它还包括blockUI吗？它不应该只是一堆div或其他DOM元素加上一些样式？

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

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

Answer 1

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

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

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

我创建了一个使用beforeunload事件的jsfiddle，效果非常好。