Ваше благополучие зависит от ваших собственных решений.

Джон Дэвисон Рокфеллер

Меню сайта
  • Компьютеры
  • Телефоны
  • Бизнес
  • Свое дело
  • Решение проблем
  • Интернет
  • Новости
  • Новости
    Реклама
    Реклама

    Одностраничные приложения и HTML5 pushState

    1. История API
    2. PushState
    3. публичное мероприятие
    4. Рабочий пример
    5. Одностраничное приложение SEO
    6. Почему pushState вместо хэш-бэнов
    7. Совместимость браузера

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

    • кросс-браузерная поддержка
    • закладки для ссылок
    • рабочий браузер 'кнопки назад / вперед
    • 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, и никогда больше не сталкивайтесь с проблемой перекрестного происхождения. Ах, да, это бесплатно.

    Смотрите также

    Рекомендации

    Поделиться этой записью

    Поделитесь этим постом, а затем оставьте мне комментарий ниже с вашими мыслями о приложениях на одну страницу. Спасибо за прочтение!

    Профиль
    Реклама
    Деловой календарь
    Пн Вт Ср Чт Пт Сб Вс
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    Реклама
       
    Sti.lg.ua © 2016