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 覆盖的迹象。

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

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

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

score 4 · Accepted Answer

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

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

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

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

1 回答 1