jquery - 在页面导航时使用 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 覆盖的迹象。

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

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

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

Answer 1

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

第二个问题是该事件似乎来得太晚了。考虑 beforeunload 事件:

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

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