在卸货前我能放些什么?

What can I put in beforeUnload?

本文关键字：什么      更新时间：2023-09-26

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

我现在使用这个:

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

当"test"确实记录到控制台，功能slideDown和测试警报都没有产生…

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

注:我正在测试Chrome，这就是为什么我不得不使用onbeforeUnload而不是onUnLoad，这似乎不支持Chrome?

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/

为简洁起见，假设使用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以外的链接(但你可以改变选择器)

显然要保持动画的速度，就像突如其来的oslo.com那样

如果你试图让这个动画在他们离开你的网站或关闭浏览器时触发，它将无法按预期工作。但是，当用户在你的网站中移动时，你可以通过删除链接的'href'属性并创建具有设置窗口的回调函数的动画来创建这个动画。位置属性。比如:

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

大量的工作，不会seo友好但是

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

  • onbeforeunload处理器阻止浏览器销毁当前页面
  • 如果你不返回任何东西，弹出窗口不会出现
因此，只要事件处理程序运行，代码就会正常工作。这意味着计时器函数是不可用的。它们只是添加到执行队列中，所以它们要做的任何事情都是在当前运行的处理程序结束后排队的，也就是在你保证代码仍在运行的最后一个时间点之后。 所以只有一种方法可以在动画结束前阻止浏览器卸载:
  • 设置一个阻塞循环，在beforeunload处理程序中浪费一些时间
  • 通过在循环前的元素上设置适当的类来启动CSS3动画
  • 让循环在动画结束时结束(让循环检查元素或其他东西的实际高度)

哦，是的，这是一个最令人讨厌的黑客，但我能找到一个方法来阻止浏览器卸载页面，对吗?

我将感谢你的意见，让我知道在循环中应该放些什么。我正在考虑一些选项:

  • 在处理大数字时浪费CPU
  • 访问本地存储(同步调用，IO操作)
  • 访问DOM(这个解决方案已经必须)

任何想法?

相关文章：