Можно ли как-то определить, было ли последнее навигационное событие вызвано кнопками браузера назад или вперед? - PullRequest
Новая
       35

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

2 голосов
/ 30 ноября 2011

Я пишу одностраничное веб-приложение, которое использует push-состояние HTML5 (возвращаясь к хеш-тегам) для обработки навигации на стороне клиента.

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

Я хотел бы, чтобы при переходе на новую страницу была бы плавная прокруткаВы наверх (То же поведение, что и на всех веб-сайтах при переходе по ссылкам).

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

Можно ли определить, была ли последняя / текущая навигация на стороне клиента былавызвано кнопками назад или вперед браузера?Если это так, я буду использовать это, чтобы предотвратить прокрутку.

Приветствия

Ответы [ 2 ]

0 голосов
/ 14 декабря 2011

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

например: 

var myDefaultPageName = "myAjaxPage1";

// hash tags in this domain may indicate ajax page navigation
// using '#!' to indicate ajax links however, allowing user to type in 
// hashtag without '!' so function understands both '#!myAjaxPage1' and
// '#myAjaxPage1' as ajax requests, the pattern of the hashtag will be
// checked to determine if ajax navigation is needed

function processHashtagChange() {
    // note: bookmarked urls may be #! or #, need to understand both
    var startIndex = 1; // skip '#'
    if (location.hash.charAt(1) == '!') { // check for special '#!' ajax prefix
        startIndex++;
    }

    // extract ajax pagename from hash
    var pagename = location.hash.substring(startIndex); 

    var regex = "."; // match everything for now, hash tags 
                     // only used for ajax navigation here

    if (pagename.length == 0) // default to something if needed, allows 
    {                         // back button to http://mydomain.com to load 
                              // default ajax page
        pagename = myDefaultPageName;
    }

    if (pagename.match(regex)) { // does this hash indicate ajax navigation
        var pageurl = '/?page=' + pagename;    
        loadPageViaAjax(pageurl); // update the dom via ajax
    }
}
0 голосов
/ 30 ноября 2011

Насколько я знаю, вы можете заметить только разницу между "мое приложение изменило хэштег" и "браузер принудительно изменил хэштег".

Вот как я это проверяю:

Когда ваш контроллер выдвигает новое состояние (открывает страницу) со своим новым хэштегом, сохраните этот новый хэштег в глобальной переменной javascript прямо перед тем, как вы установите его в window.location.hash. Когда вы ловите событие hashchange, вы сравниваете эту свою глобальную переменную с window.location.hash. Если глобальная переменная такая же, как новый хэш-тег, это означает, что ваше приложение просто изменило сам хэш (и открыло новую страницу). Если глобальная переменная не установлена, это означает, что браузер форсировал навигацию. Однако вы не можете знать, принудительно ли браузер осуществлял навигацию из-за редактирования адресной строки или из-за кнопки «назад / вперед».

Рассмотрим этот код: 

// Global hashtag variable, used to compare state changes
var gCurrentHash = window.location.hash;

// Called when hashtag is changed by the browser
function onHashChange(event)
{
    var hash_tag = window.location.hash;

    if (hash_tag != gCurrentHash)
    {
        // Browser forced navigation
    }
    else
    {
        // App caused navigation
    }
}

window.addEventListener('hashchange', onHashChange, false);

В вашем контроллере, прямо перед обновлением хеш-тега, наберите этот код: 

gCurrentHash = window.location.hash;

Очень важно, чтобы это называлось ДО того, как вы действительно измените window.location.hashtag!

[править] Вы можете попробовать эту альтернативу: Сохраните историю изменений хэштега в файле cookie и сравните их. По этой информации вы можете оценить события навигации назад / вперед.

...