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

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

Меню сайта
  • Компьютеры
  • Телефоны
  • Бизнес
  • Свое дело
  • Решение проблем
  • Интернет
  • Новости
  • Новости
    Институт бизнеса и дизайна
    Лицензия на осуществление образовательной деятельности  № 1046 от 9 июля 2014 г. Свидетельство о государственной аккредитации № 002042003 B&D — ведущий вуз Москвы в области дизайна и бизнеса,

    Как сделать скриншот экрана на компьютере
    За создание скриншота экрана в Windows 7, 10 и более ранних версиях системы отвечает кнопка на клавиатуре под названием Print Screen. Чаще всего указывается ее сокращенное название – Prt Scr. Клавиша

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

    Интернет-магазин женской обуви botforty-msk
    Выбор зимней обуви – дело довольно хлопотное и непростое. Такая обувь должна отвечать одновременно нескольким требованиям: она должна быть теплой, удобной, практичной и модной. Если вам дороги ваши деньги,

    Институт бизнеса и делового администрирования
    Институт бизнеса и делового администрирования (ИБДА) Российской Академии Народного Хозяйства и Государственной службы при Президенте РФ (бывшая АНХ при Правительстве РФ) – одна из ведущих школ бизнеса

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

    Как сделать презентацию на компьютере
    Постоянный автор. Увлекается современными технологиями, графикой, дизайном. Завсегдатай AppStore.

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

    Реклама
    Реклама

    Одностраничные приложения и 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