Кнопка "Назад" в браузере и jQuery-анимированная страница - PullRequest
Новая
       16

Кнопка "Назад" в браузере и jQuery-анимированная страница

12 голосов
/ 02 июня 2011

У меня сложная проблема, с которой я уже давно борюсь.

Проблема: когда я возвращаюсь на предыдущую страницу с помощью кнопки «Назад» в браузере, страница отображается в своем окончательном состоянии после воспроизведения всех анимаций. Я хочу, чтобы он отображался в исходном состоянии и воспроизводил анимацию.

Мой сайт использует базовую анимацию jQuery. В начальном состоянии каждой страницы основное содержимое скрыто под нижним краем окна браузера. Когда окно загружается, основное содержимое анимируется до появления в браузере. Когда посетитель нажимает на любую ссылку меню, основной контент снова сворачивается и исчезает над верхним краем окна браузера - и затем загружается новая страница. Все это достигается с помощью этих двух битов кода: 

//Animate the content up from below the browser window

$('#maincontent').animate({top: "15%"}, 2000);

и 

//Animate the content up to hide above the browser window

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;
    $('#maincontent').animate({
        top: '-300%'
    }, 500,
    function() {
        window.location = href;
    });
});

Вопрос: как заставить страницу отображаться в исходном состоянии при нажатии кнопки «Назад» в браузере?

Я некоторое время просматривал StackOverflow. Люди много спрашивали об этой проблеме, но никто, похоже, не пришел к решению, которое действительно сработало. Предложения включают блокировку страницы от кэширования - (не работает, и даже если бы это работало, не было бы очень продуктивным, потому что некоторые страницы действительно должны быть кэшированы) - перезагрузить страницу (приводит к некоторым особым поведениям и в конечном итоге не ' или работать) - с помощью куки-файлов (нигде не приведен конкретный пример кода) или с помощью php (нигде не приведен конкретный пример кода). Я задал несколько вопросов на этом сайте и получил ряд предложений, но ни один из них не сработал в моей ситуации. Поэтому после нескольких бессонных ночей я хочу спросить, может ли кто-нибудь действительно помочь с этим.

Если бы кто-то успешно справился с этой проблемой раньше, я был бы признателен, если бы вы поделились своими экспертными знаниями и предложили работоспособное решение!

НОВОЕ РЕДАКТИРОВАНИЕ: Я думаю, что, возможно, нашел решение, , но мне нужна чья-то помощь с синтаксисом jQuery / JavaScript. Я хочу попробовать изменить код, чтобы добавить к нему еще одно действие, но я не уверен, как его написать, чтобы страница перезагружалась за мгновение до того, как местоположение было изменено на новую страницу вместо второго фрагмента, показанного выше, я хочу написать что-то вроде этого: 

//Animate the content up to hide above the browser window

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;
    $('#maincontent').animate({
        top: '-300%'
    }, 500,
    function() {
    // a code that reloads the same page, something like
    //window.location = window.location; followed by
        window.location = href;
    });
});

- но я просто не знаю, как правильно это написать.

В качестве альтернативы, возможно, возможно сбросить значения css страницы на значения по умолчанию из файла css и снова запустить JavaScript?

Может кто-нибудь посоветует правильный код, пожалуйста?

Ответы [ 3 ]

7 голосов
/ 02 июня 2011

Отказ от ответственности: следующее не совсем надежное решение, но я посчитал его забавным и подумал, что должен поделиться.

У меня было подобное требование в прошлом, и как ни странноДостаточно, но в итоге я решил перейти на jQuery, чтобы воспользоваться ошибкой в ​​jQuery 1.3 .

. Я тестировал это только на одной версии Firefox, поэтому YMMV, но попробуюследующее:

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

Обновление

По следу вышеуказанной ошибки jquery, выглядиткак вы можете получить тот же эффект, отключив bfcache.

Самый простой способ сделать это - добавить атрибут onunload в тело .(подробности в ссылке). 

<body onunload=''>

Вот пример, в котором используется jquery 1.6.Опять же, не проверено полностью, поэтому YMMV.

1 голос
/ 16 июня 2011

Приведенные выше ответы касаются проблемы, но предоставляют хакерские способы решения вопроса. Кажется, это правильный способ сделать это. 

$(window).bind('pageshow',function(){
    alert("This page will run even if the back button was pressed!");
});

Чтобы узнать больше о событиях pagehow / pagehide, смотрите здесь: http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

Вы можете сделать еще один шаг, например: 

$(window).bind('pageshow',function(e){
        if (e.persisted) {
            alert("pageshow event handler called.  The page was just restored from the Page Cache.");
        } else {
            alert("pageshow event handler called for the initial load.  This is the same as the load event.");
        }
}
0 голосов
/ 02 июня 2011

Проверьте эту тему . Он предлагает взломать, как указано ниже (скопировано оттуда):

Событие onload должно запускаться, когда пользователь нажимает кнопку возврата. Элементы, не созданные с помощью JavaScript, сохранят свои значения. Я предлагаю сохранить резервную копию данных, используемых в динамически создаваемом элементе, в INPUT TYPE = "hidden" или в TEXTAREA, для которого задано отображение: ни один из них не загружается, используя значение текстового поля для восстановления динамических элементов в том виде, как они были.

Если вы не хотите перестраивать страницу и хотите ее перезагрузить, тогда вы можете сделать следующее: Код: 

<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
onload=function(){
var e=document.getElementById("refreshed");
if(e.value=="no")e.value="yes";
else{e.value="no";location.reload();}
}
</script>

Вы можете сделать скрытое значение как "Да" при щелчке по меню.

НТН

...