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

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

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

Мой сайт использует некоторую базовую анимацию 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 в течение некоторого времени. Люди много спрашивали об этой проблеме, но никто, похоже, не пришел к решению, которое действительно сработало. Предложения включают в себя блокирование страницы из кэша - (не работает, и даже если это сработало, не будет очень продуктивным, потому что некоторые страницы нужно кэшировать) - перезагрузка страницы (приводит к некоторым своеобразным поведением и, в конечном счете, t) - использование файлов cookie (какой-либо конкретный пример кода не указан) или с использованием 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;
    });
});

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

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

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

Ответы

Ответ 1

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

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

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

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

Обновление

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

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

<body onunload=''>

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

Ответ 2

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

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

Чтобы узнать больше о событиях на странице/странице, смотрите здесь: 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.");
        }
}

Ответ 3

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

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

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

<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>

вы можете сделать скрытое значение "Да" на клике #menu.

НТН