- История API
- PushState
- публичное мероприятие
- Рабочий пример
- Одностраничное приложение SEO
- Почему pushState вместо хэш-бэнов
- Совместимость браузера
Одностраничные приложения и веб-сайты становятся все более популярными с каждым днем. Перед созданием такого приложения давайте определим, как эти приложения должны выглядеть и вести себя:
- кросс-браузерная поддержка
- закладки для ссылок
- рабочий браузер 'кнопки назад / вперед
- SEO-дружественные ссылки
- сканируемое приложение
- работает с отключенным JavaScript
В моем предыдущем посте ( Crawlable AJAX Приложения ) Я обсуждал, как индексировать сканеры и пауки поисковых систем с помощью метода hash-bang. Теперь я собираюсь расширить эту тему, описав метод pushState в HTML5 History .
История API
Откройте консоль браузера и введите window.history или просто history. В современных браузерах вы должны увидеть следующее:
PushState
Выдвигает данное состояние в историю сеанса с заданным заголовком и, необязательно, с заданным URL.
Синтаксис:
history.pushState (состояние, заголовок, URL);
Параметры:
состояние Объект состояния - это объект, представляющий состояние пользовательского интерфейса. Когда пользователь переходит к новому состоянию, запускается событие popstate, и свойство состояния события равно объекту состояния истории. название (в настоящее время игнорируется) Название для государства. URL (необязательно) URL для государства. Как абсолютные, так и относительные ссылки принимаются. <script> history.pushState (null, null, 'new-page.html'); // или history.pushState ({url: 'new-page.html'}, 'New Page'); // или history.pushState ({url: 'new-page.html', page: 2}, 'New Page', 'new-page.html'); </ Скрипт>публичное мероприятие
Событие popstate запускается каждый раз, когда изменяется текущая запись истории. Это происходит, когда пользователь нажимает кнопки браузера «Назад» и «Вперед» или программно, вызывая методы history.back (), hitory.forward (), history.go ().
<script> // jQuery $ (window) .on ('popstate', function (e) {var state = e.originalEvent.state; if (state! == null) {// загрузка содержимого с помощью ajax}}); // Ванильный javascript window.addEventListener ('popstate', function (e) {var state = e.state; if (state! == null) {// загрузка содержимого с помощью ajax}}); </ Скрипт>Рабочий пример
Следующий пример демонстрирует, как должно выглядеть настоящее одностраничное приложение . Смотрите нашу работу демоверсия pushState , Исходный код доступен на этом GitHub репо ,
<script> $ (function () {var load = function (url) {$ .get (url) .done (function (data) {$ ("# content"). html (data);})}; $ ( document) .on ('click', 'a', function (e) {e.preventDefault (); var $ this = $ (this), url = $ this.attr ("href"), title = $ this. text (); history.pushState ({url: url, title: title}, title, url); document.title = title; load (url);}); $ (window) .on ('popstate', function ( e) {var state = e.originalEvent.state; if (state! == null) {document.title = state.title; load (state.url);} else {document.title = 'Мировые регионы'; $ ( "#content"). empty ();}});}); </ script> <a href="africa"> Африка </a> <a href="asia"> Азия </a> <a href="europe"> Европа </a> <a href = "север- Америка "> Северная Америка </a> <a href="oceania"> Океания </a> <a href="south-america"> Южная Америка </a> <div id =" content "> </ div>Одностраничное приложение SEO
Вы должны различать запросы к серверу и отправлять соответствующий контент в браузер. Например: когда запрос выполняется через XMLHttpRequest (запросы AJAX), ответ должен содержать только запрошенное содержимое (определенную часть веб-страницы). Для регулярных запросов вы должны отправить всю веб-страницу, например, html, head, body + page content.
Почему pushState вместо хэш-бэнов
- Чистые URL, которые не нарушают RFC 3986
- Работает даже без JavaScript
- Меньше заботиться о сканировании и индексировании
В заключение, поскольку современные браузеры широко используются, вам следует подумать об использовании push5 для HTML5 для создания одностраничных приложений и использовать #! Метод hash-bang, если вы намереваетесь поддерживать старые браузеры. Фактически, Facebook использует двойной подход - взламывание хешей для IE9 и pushState для современных браузеров.
Совместимость браузера
Chrome 5+, Firefox 4+, IE 10+, Safari 6+, Opera 11.5+
Сделайте ваш сайт более безопасным, используя HTTP-заголовки для Wordpress, и никогда больше не сталкивайтесь с проблемой перекрестного происхождения. Ах, да, это бесплатно.
Смотрите также
Рекомендации
Поделиться этой записью
Поделитесь этим постом, а затем оставьте мне комментарий ниже с вашими мыслями о приложениях на одну страницу. Спасибо за прочтение!
