Знайомимось з HTML5 History API

10 хв. читання

Історія - це завжди цікаво, чи не правда? В старих версіях HTML, ми мали обмежений контроль над історією браузера.

З HTML5 History API, ми отримуємо набагато більше можливостей. Тепер ми можемо додати запис, або змінити URL-адресу в адресному рядку без перезавантаження сторінки.

Що таке History API?

У цій статті ми з вами дізнаємося, чому HTML5 History API в деяких випадках є необхідним.

Раніше, ми часто використовували хеш-значення для зміни вмісту сторінки, особливо для важких, односторінкових додатків, оскільки було неможливо змінити URL-адресу не оновивши сторінку. Крім того, при зміні значення хеш-функції для URL, зміни в історії браузера не відбувались.

Тепер, однак, обидві ці речі доступні з HTML5 History API. Це дозволяє нам розробляти складні, односторінкові додатки без використання хеш-значень. Також, тепер ми можемо створювати SEO-дружні додатки. Крім того, цей метод дозволяє розвантажити смугу пропускання.

У цій статті ми розробимо односторінковий додаток з допомогою цього API, щоб все це продемонструвати.

Це означає, що ми будемо завантажувати всі необхідні ресурси при першому завантаженні сторінки. Додаток буде завантажувати тільки необхідний зміст. Іншими словами, замість того, щоб завантажувати ресурси постійно, ми отримуємо тільки необхідні ресурси, а потім підтянемо контент іншим запитом.

Зверніть увагу, що ви повинні виконати деяке кодування на стороні сервера, щоб отримувати лише частину ресурсів замість повного вмісту сторінки.

Браузерна підтримка

На момент написання цієї статті, HTML5 History API має досить гарну браузерну підтримку, детальніше тут. Це посилання дасть вам уявлення про браузерну підтримку, але краще завжди перевіряти коректну роботу на різних переглядачах перед використанням.

Щоб програмно визначити чи підтримує ваш браузер API, використайте наступний рядок коду:

    return !!(window.history && history.pushState);

Також, рекомендую цю [статтю](http://www.xpertdeveloper.com/2014/08/detect- html5-features/).

Якщо ви використовуєте Modernizr, тоді вам потрібен наступний код:

    if (Modernizr.history) {
        // History API Підтримується 
    }

Якщо ваш браузер не підтримує History API, то ви можете використовувати history.js поліфіл.

Працюємо з історією

HTML5 надає два нових методи:

  1. history.pushState()

  2. history.replaceState()

Які, відповідно, дозволяють додавати і оновлювати історію. Обидва працюють однаково і потребують однакове число параметрів. Крім цих методів, ми маємо подію popstate. Далі в статті, ми побачимо, як і коли використовувати цю подію.

pushState і replaceState мають однакове число параметрів:

  1. state може зберігати JSON-рядок, і буде доступний для події popstate;

  2. параметр title сьогодні ігнорується більшістю браузерів, тому краще встановити його в null;

  3. url \- адреса може представляти будь-який URL. Вона буде оновлюватися з адреси браузера. Існує ця адреса чи ні - неважливо. Найголовніше, що це не перезавантажить веб-сторінку.

Основні відмінності між цими методами полягають у тому, що pushState буде додавати новий запис в історії стека, а replaceState замінить нинішнє значення.

Якщо ви досі плутаєтесь, тоді давайте розглянемо приклад.

Припустимо, що у нас стеки з двох блоків, позначених цифрами 1 і 2, і у вас є блок, позначений як 3. Коли ми виконуємо pushState, блок 3 буде додано до існуючого стека, тобто стек матиме в собі три блоки.

HTML5 History API pushState

Та ж сама ситуація. Але тепер ми виконуємо replaceState. Подія вибере блок 2 з стека і помістить туди блок 3.

HTML5 History API replaceState

При використанні replaceState, число значень історії залишиться колишнім, тоді коли pushState збільшує значення на 1.

Таким чином, ми розглянули pushState і replaceState в цілях контролю історії браузера, але припустимо, що ми маємо різні фальшиві історії, які ми склали у браузері. Користувач може перейти, а може не перейти на цю сторінку. В такому випадку, це буде проблемою, коли користувач натискає на кнопки назад і вперед браузера для переходу на сторінки історії.

Хоча ви можете очікувати, що подія popstate спрацює, коли pushState або replaceState методи розглядаються, але в реальності це не так. Замість цього, popstate буде спрацьовувати при навігації по історії сеансу, натисканням кнопки назад або вперед, або за допомогою history.go або history.back методів.

У WebKit-браузерах, подія popstate з'являється після події onload документа, але у Firefox і IE такого не відбувається.

Демонстрація

HTML

    <div class="container">
        <div class="row">
            <ul class="nav navbar-nav">
                <li><a class="historyAPI" href="home.html">Home</a></li>
                <li><a class="historyAPI" href="about.html">About</a></li>
                <li><a class="historyAPI" href="contact.html">Contact</a></li>
            </ul>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">
                    Click on Links above to see history API usage using <code>pushState</code> method.
                </div>
            </div>
            <div class="row">    
                <div class="jumbotron">
                    <h1>Home!</h1>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>
        </div>
    </div>

JavaScript

    <script type="text/javascript">
        jQuery('document').ready(function(){
             
            jQuery('.historyAPI').on('click', function(e){
                e.preventDefault();
                var href = $(this).attr('href');
                 
                // отримуємо контент
                getContent(href, true);
                 
                jQuery('.historyAPI').removeClass('active');
                $(this).addClass('active');
            });
             
        });
         
        // додаємо подію popstate для обробки кнопки браузера "назад" 
        window.addEventListener("popstate", function(e) {
             
            // отримуємо State значення використовуючи e.state
            getContent(location.pathname, false);
        });
         
        function getContent(url, addEntry) {
            $.get(url)
            .done(function( data ) {
                 
                // оновлюємоо контент на сторінці
                $('#contentHolder').html(data);
                 
                if(addEntry == true) {
                    // додаємо запис в історію використовуючи pushState
                    history.pushState(null, null, url); 
                }
                 
            });
        }
    </script>

Демо №1:

В цьому демо ви побачите, що елементи історії були зараховані в браузері, і ви можете "ходити" по ним за допомогою кнопок назад/ вперед.

Демо

Демо №2:

В цьому демо ви побачите, що історія записів поновлюється в браузерах і ви не можете переміщатися по ній за допомогою кнопок назад/ вперед.

Демо

Цей API має великий вплив на роботу нашого веб-додатка. тепер ми можемо створювати складні, SEO-дружні, односторінкові веб-додатки, які не матимуть залежності від хеш-значення в URL.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 5.8K
Приєднався: 8 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація