Что я могу положить в beforeUnload?

Я хотел бы иметь эффект анимации, который начинается, когда люди покидают страницу.

Я использую это в настоящее время:

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

В то время как "тест" действительно зарегистрирован на консоли, ни функция slideDown, ни тестовое предупреждение не создаются...

Это нормальное поведение? мы можем использовать функцию beforeunload только для бэкэнд-целей?

P.S. Я тестирую хром, поэтому мне пришлось использовать onbeforeUnload i.s.o onUnLoad, который, как представляется, не поддерживается Chrome?

ОТВЕТЫ

Ответ 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/

Ответ 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.

Ответ 3

Jorrebor, Если вы пытаетесь запустить эту анимацию, когда они покинут ваш сайт или закроют браузер, он не будет работать должным образом. Однако вы можете создать эту анимацию, пока пользователь путешествует на вашем сайте, удалив свойство "href" ваших ссылок и создав анимацию с функцией обратного вызова, которая устанавливает свойство window.location. Что-то вроде:

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

alot работы и не будет seo дружелюбным однако

Ответ 4

Я работаю с onbeforeunload и что я смог выяснить:

  • onbeforeunload обработчик блокирует браузер от уничтожения текущей страницы
  • Если вы ничего не вернете, всплывающее окно не появится.

Таким образом, ваш код будет работать до тех пор, пока обработчик событий будет работать. Это означает, что функции таймера не используются. Они просто добавляются в очередь выполнения, поэтому все, что они сделают, помещается в очередь после конца текущего выполняющегося обработчика, который после последнего момента, когда вам гарантирован ваш код, все еще работает.

Таким образом, только один способ остановить разгрузку браузера перед завершением анимации:

  • помещает цикл блокировки, который тратит некоторое время в обработчике beforeunload
  • запустите анимацию CSS3, установив соответствующий класс в элементе перед циклом
  • завершите цикл, когда анимация закончится (сделайте цикл проверкой фактической высоты элемента или чего-то еще)

О, и да, это самый противный взлом всех, но я смог найти способ остановить браузер от выгрузки страницы, правильно?

Я был бы признателен за комментарии с идеями о том, что положить в цикл. У меня есть несколько вариантов:

  • тратить процессор на математику на больших количествах
  • доступ к localstorage (синхронный вызов, операция ввода-вывода)
  • доступ к DOM (это решение уже необходимо)

Любые идеи?