Можно ли написать javascript "Бесконечный свиток", который может обрабатывать кнопку назад?

Question

Зайдите сюда: http://www.infinite -scroll.com / Играть с бесконечным свитком. Обратите внимание, что вы не можете нажать на ссылку, а затем нажать «назад». При этом возникают глюки.

Итак, я планирую написать свой собственный бесконечный свиток.

• Когда пользователь доберется до дна, загрузите вызов AJAX. Затем сделайте JQuery «добавить» результат в div. Затем вызовите мои другие функции для этих элементов. (Я установил фоновые изображения всех этих элементов в javascript).

Будет ли это работать? Если я сделаю это ... смогу ли я справиться с кнопкой возврата?

Answer 1

Я рассмотрел то же самое в проекте, над которым работал. Один из вариантов, о котором я подумал, - позволить кнопке «Назад» вернуться в то место, где была нажата ссылка (как при обычном просмотре).

Во-первых, вам нужно записать, какую страницу бесконечной прокрутки вы включаете, чтобы вы могли снова загрузить до этого раздела. Вы можете сделать это с помощью некоторой умной игры со значением window.location.hash. Если вы посмотрите на мой ответ на этот вопрос , я более подробно объясню, как это сделать на простом JavaScript или jQuery, используя плагин для адресов Асуала .

Основная часть этого будет выглядеть так:

// Whatever you're using to load the next page
function scrollToNextPage(page){
   // Your infinite scrolling stuff
   $.address.parameter("currentPage", page);
}

$.address.externalChange(function(){
   var page = $.address.parameter("currentPage"),
       top = $.address.parameter("linkTop");

   loadAjaxUpTo(page);   
   $('html, body').animate({ scrollTop: top }, 500);
});

// Set a parameter for the location of a clicked link
$("a").live('click', function(){
   $.address.parameter("linkTop", $(this).scrollTop());
});

Я не реализовал последний бит (щелкнул позицию ссылки), но не понимаю, почему это не сработает. Это заставит окно красиво прокручиваться туда, где вы находитесь. Вместо этого вы всегда можете установить привязку к загруженной странице (но когда вы прокрутите ее, она всегда перейдет к началу страницы).

Пара моментов: Я бы не рекомендовал это . По крайней мере, для проекта, который я делал, это не было действительно необходимо. В моем проекте мы ожидали, что пользователь вернется, чтобы изменить свои параметры, и решили, что прокрутка не будет проблемой (хотя у нас не было такого количества страниц для прокрутки). AJAX (и ваш JavaScript для установки изображений) необходимо снова загрузить и выполнить, что занимает много времени в зависимости от того, сколько страниц вам нужно перезагрузить. Кроме того, вы можете перейти по ссылке (вы можете просто window.scrollTo, но анимация не получается, поэтому все очень прерывисто. Вы всегда можете просто загрузить страницу, на которой находился человек, и забыть о предыдущих страницах, но вы Это все еще мешает работе пользователей. Или (что я пытался) заключалось в реализации двухсторонней бесконечной прокрутки. Таким образом, она будет загружать страницу, по которой щелкнул пользователь, и prepend предыдущие страницы, если они прокручивались вверх - это было слишком хотя много работы для того, что было.

Другой момент заключается в том, что, если вы все еще делаете это, вы хотите использовать запрос GET для получения ваших страниц (и убедиться, что кэш-память не настроена на немедленное истечение срока действия). Я обнаружил, что страницы, запрошенные Ajax с запросом GET, берутся из кэша (по крайней мере, в некоторых браузерах, которые я пробовал). Отправка ваших данных через POST всегда будет игнорировать кеш.

Answer 2

Единственный способ справиться с кнопкой возврата - это изменить хэш местоположения (бит после символа #).Обработка нажатий кнопок «назад» и «вперед» может быть выполнена двумя способами:

1. Добавьте <a name="bookmark1"></a>, уникальный для каждого добавленного раздела, и измените location.hash в соответствии с ним.
2. Используйте setInterval с коротким временем, например, 100 мс, чтобы просмотреть location.hash на предмет изменений и перейти к необходимой части страницы.Вы должны сделать это, потому что вы не можете определить, когда нажимаются кнопки «назад» / «вперед».

Это реализация второго метода, показывающая, как он работает.При этом каждый запрос ajax содержит <a name="ajax-section-1"></a> и ajax-section-2 и т. Д.

function addToBottom(htmlToAdd) {
    $('#main-div').append(htmlToAdd);
    window.location.hash = $('#main-div a[name^=ajax-section-]').last().attr('name');
}