Веб-сайт с hashchange - запрашивает ли событие popstate?

Question

Я никогда не работал с методом onpopstate / pushState в HTML5. Однако я создаю (или уже построил) веб-сайт, где прокрутка страницы изменяет хэш в адресной строке на идентификатор отображаемого в данный момент элемента в области просмотра. Так что у меня есть своего рода история браузера и глубокие ссылки на мою одностраничную верстку.

Я все еще делаю это с установкой top.location.hash и использованием функции hashchange(). Теперь я наткнулся на этот новый метод popstate / onPushstate в HTML5 и подумал, что это будет интересно…

Прежде всего: Каковы преимущества использования этих popstate/onPushState методов? Лучше использовать это, чем классический способ использования top.location.hash? Производительность лучше?

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

Это возможно? Если да, то как?

Answer 1

Каковы преимущества использования этих методов popstate / onPushState?

Вы получаете реальные URL, которые не зависят от JavaScript для работы.

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

if (history && history.pushState) 

… или просто используйте библиотеку совместимости

Answer 2

С помощью API истории html5 вы можете делать больше вещей.

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

Когда вы создаете или заменяете запись истории, вы также можете изменить URL-адрес и передать объект javascript, который будет возвращен вам в popstate, который может содержать любые данные.

Очень хорошим примером хорошего использования этого API-интерфейса является github (http://www.github.com). При запуске они отправили полную страницу один раз, после этого они меняют страницу и URL-адрес в соответствии с новой страницей, которую вы загружаете при первоначальном запросе. (это означает, что обновление работает очень хорошо)

если вы хотите проверить поддержку истории, вы можете сделать это следующим образом:

if (history && history.pushState)