Question

我希望有一个动画效果，当人们离开页面时开始。

我目前使用它：

window.onbeforeunload = function (){
    alert("test");
    console.log("test");
    sliderIntervalId = setInterval('SlideDown()',1);
}

虽然确实将“test”记录到控制台，但是没有生成函数slideDown和测试警报......

这是正常行为吗？我们可以将beforeunload函数仅用于后端目的吗？

P.S。我正在测试chrome，这就是为什么我必须使用onbeforeUnload i.s.o onUnLoad，这似乎不受Chrome支持？

Answer 1

onbeforeunload可以在只有一个的情况下延迟页面卸载：当返回具有已定义值的return语句时。在这种情况下，用户会收到一个确认对话框，为用户提供不离开页面的选项。

不能以任何方式强迫您想要的结果。您的动画将一直运行，直到浏览器开始加载下一页：

[User] Navigates away to http://other.website/
[Your page] Fires `beforeunload` event
[Your page] `unload` event fires
[Browser] Received response from http://other.website/
[Browser] Leaves your page
[Browser] Starts showing content from http://other.website/

Answer 2

为了简洁起见假设jQuery：

$('nav a').click(function (e) {

    //ignore any "modified" click that usually doesn't open in the current window
    if (e.which > 1 || e.shiftKey || e.altKey || e.metaKey || e.isDefaultPrevented()) {
        return;
    }

    //where you going here?
    var place = this.href;

    //you're not going anywhere, buddy
    e.preventDefault();

    //watch me dance, first
    $('.animate-me').fadeOut(1000, function afterAnimation () {

        //you're free to go!
        document.location = place;
    });
});

基本上，您不使用onbeforeunload。一个优点是你可以随心所欲地保留用户，一个缺点是用户在使用nav之外的链接时不会看到动画（但你可以只改变选择器）

显然可以快速保持动画，例如suddenlyoslo.com。

Answer 3

Jorrebor，如果您尝试在离开您的网站或关闭浏览器时触发此动画，则无法按预期工作。但是，您可以在用户在您的站点内移动时创建此动画，方法是删除链接的“href”属性并创建具有设置window.location属性的回调函数的动画。类似的东西：

document.getElementById('home').onclick(function(){
     yourAnimationFunction(function(){
          window.location="example.com";
     });  
});

很多工作，但不会太友好了

Answer 4

我正在使用onbeforeunload，我能够弄清楚的是：

onbeforeunload处理程序阻止浏览器销毁当前页面
如果您没有返回任何内容，则不会显示弹出窗口。

因此，只要事件处理程序运行，您的代码就会正常工作。这意味着定时器功能不可用。它们只是添加到执行队列中，所以他们要做的任何事情都是在当前正在运行的处理程序结束后排队，这是在保证代码仍在运行的最后一个时间点之后。

因此，只有一种方法可以在动画结束前停止浏览器的卸载：

在beforeunload处理程序
中放置一个浪费时间的阻塞循环
通过在循环
之前的元素上设置适当的类来启动CSS3动画
在动画结束时使循环结束（使循环检查元素的实际高度或其他内容）

哦，是的，这是一个最糟糕的黑客，但我能找到一种方法来阻止浏览器卸载页面，对吗？

我很感激有关如何放入循环的想法的评论。我考虑了一些选择：

浪费CPU来大数数学

访问localstorage（同步调用，IO操作）

访问DOM（此解决方案已经必须）

有什么想法吗？

在卸载之前我能放入什么？

4 个答案: