在页面导航时使用jQuery BlockUI插件(卸载事件)

Question

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()。它是否也涵盖块UI？它不应该，因为它只是一堆div 或其他 DOM 元素加上一些样式？

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

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

Answer 1

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

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

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

我创建了一个使用 beforeunload 事件的 jsfiddle，它运行良好。