0

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

我的代码（jsfiddle）：

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

2 回答 2

3

来自 MDN：

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

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

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

没有 API 可以完成您想要做的事情。如果用户要离开，浏览器会让你做的唯一一件事就是提示他们并询问他们是否确定要离开。您无法阻止它们（或延迟它们同时仍保持对 UI 或任何使用 JavaScript API 的控制）离开您的页面。

于 2013-11-01T13:46:31.073 回答
1

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

这是设计使然 - 想象一下，如果允许每个烦人的广告弹出窗口通过输入 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 加载新页面内容。

于 2013-11-01T14:00:16.217 回答