Question

这看起来像是一个基本问题，但我根本无法解决这个问题。我正在使用动画来平滑页面之间的导航。 window.onbeforeunload事件看起来很好，但是jquery在新线程上执行动画。有没有办法等到动画结束？我尝试使用delay()和setTimeout() jquery函数，但它们显然没有停止该函数。当我在最后添加一个循环来等待时，窗口不会刷新，因此动画甚至都没有显示。

我的代码（jsfiddle）：

window.onbeforeunload = function (e) {
    $('#loader-sheet').fadeIn(500);
}

Answer 1

来自MDN：

当此事件返回非void值时，系统会提示用户确认页面卸载。在大多数浏览器中，事件的返回值显示在此对话框中。

onBeforeUnload用于提示用户，而不是执行操作（如ajax，动画或其他方式）

https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload

没有API可以完成您要做的事情。如果用户离开，浏览器唯一允许您做的就是提示他们并询问他们是否确定要离开。您无法阻止它们（或者在保持对UI的控制或使用JavaScript API的任何操作时延迟它们）从您的页面导航。

Answer 2

您无法阻止页面更改 - 您只能提供一些文字作为确认（例如“您有未保存的草稿，您确定要离开吗？”）。

这是设计 - 假设每个恼人的广告弹出窗口都允许通过输入200秒动画来阻止您退出页面。

但是，您可能仍然可以执行某些操作，具体取决于为什么页面正在更改。例如，如果他们点击页面上的链接（不使用后退/前进按钮），那么您可以覆盖每个链接的click处理程序，例如：

$('a[href]').on('click', function () {
    if (/* link would change page */) {
        performPageTransition(this.getAttribute('href'));
        return false;
    }
});

function performPageTransition(newUrl) {
    $('#loaderSheet').fadeIn(500, function () {
        // Animation complete - move to new URL
        window.location = newUrl;
    });
}

因此，您不会立即关注链接，而是拦截点击事件，然后稍后自己手动移动页面。

但是，我还会考虑是否可以通过AJAX加载新的页面内容。

如何使用onbeforeunload事件等到jquery动画结束？

2 个答案: