Хостинг серверов Minecraft playvds.com
  1. Этот сайт использует файлы cookie. Продолжая пользоваться данным сайтом, Вы соглашаетесь на использование нами Ваших файлов cookie. Узнать больше.
  2. Вы находитесь в русском сообществе Bukkit. Мы - администраторы серверов Minecraft, разрабатываем собственные плагины и переводим на русский язык плагины наших собратьев из других стран.

Знатоки HTML5 History API - Сюда!

Тема в разделе "Оффтопик", создана пользователем W_0rld, 31 дек 2016.

  1. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Почти закончил основы своего сайта, осталось только замутить навигацию.
    В общем курил я, курил доки, что-то наклепал, но похоже что-то пошло не так..

    При нажатии на ссылку, я активирую ajax-запрос, результаты которого я скидываю в блок с контентом, и после этого выполняю следующий код:
    Код (Javascript):
    1. history.pushState({page:location.pathname}, "HR | " + json.title, href);
    Ну вроде прокатило, при вводе кода history.state['page'] вроде выводится то что я "забил".

    Но стоит мне нажать на кнопочку "назад" в навигации браузера, как js просто берет и загружает мне главную страницу.

    Кстати, вот как я реагирую на нажатие кнопок навигации браузера:
    Код (Javascript):
    1. window.addEventListener('popstate', function(event) {
    2. console.log("Получаем данные от URL\n"+history.state['page']);
    3. ajax('get', event.state['page']);
    4. }, false);
    Прошу поправить меня, и написать пример кода - как это должно работать?

    Вот живое демо.
     
  2. Mr Hosting
  3. Negezor

    Negezor Участник Пользователь

    Баллы:
    36
    Помог бы но у меня 5 утра(
     
  4. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Убедительный аргумент) у меня вот 00:00 щас
     
  5. Negezor

    Negezor Участник Пользователь

    Баллы:
    36
    Как минимум сделать так:
    Код (Javascript):
    1.  
    2. window.addEventListener('popstate', function(event) {
    3.   event.preventDefault();
    4.  
    5.   console.log("Получаем данные от URL\n"+history.state['page']);
    6.  
    7.   ajax('get', event.state['page']);
    8. }, false);
    9.  
     
  6. Cames

    Cames Старожил Пользователь

    Баллы:
    153
    Skype:
    sky_meg
    Тебе нужно отлавливать события перехода назад и пушить прошлый стейт.
    --- Сообщения объединены: 1 янв 2017, предыдущее сообщение: 1 янв 2017 ---
    Ajax тут лишний. Можно состояние страницы запушить в стейт и тягать оттуда)
    --- Сообщения объединены: 1 янв 2017 ---
    На одном из прошлых проектов писал костыль с history api. Держи пример, тс.
    Код (Javascript):
    1. 'use strict';
    2.  
    3. (function(window) {
    4.   let moduleName = 'lw-history-state';
    5.   let callbacks = [];
    6.   let current = 0;
    7.  
    8.   let setState = (object, urlHash, callback) => {
    9.     window.history.pushState(
    10.       {
    11.         callback: callbacks.length,
    12.         object: object
    13.       },
    14.       '',
    15.       urlHash
    16.     );
    17.     callbacks.splice(current + 1, callbacks.length);
    18.     callbacks.push(callback);
    19.     current++;
    20.   };
    21.  
    22.   window.addEventListener('popstate', (e) => {
    23.     const state = e.state || {};
    24.     callbacks.pop()(state);
    25.   });
    26.  
    27.   let module = {
    28.     setState: setState
    29.   };
    30.  
    31.   window.lwModules[moduleName] = module;
    32. })(window);
     
    Последнее редактирование: 1 янв 2017
  7. Negezor

    Negezor Участник Пользователь

    Баллы:
    36
    Кэширование на динимичных приложениях практический недопустимо, ибо данные могут устареть, а вот насчёт этого стейты не нужно пушить когда возвращаешься назад)
    > let, > array function
    А где тогда классы?
     
  8. Cames

    Cames Старожил Пользователь

    Баллы:
    153
    Skype:
    sky_meg
    В "динамичных" приложениях вообще такие костыли не используют
     
  9. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Я думаю что не лишний, во первых данные могут устареть - пользователь выйдет из аккаунта, а сайд-бар с его кнопками останется. Во вторых - у меня на сайте будут аудиозаписи так что перезагружать страницу никак нельзя.

    Мб кто поможет уже с моим вариантом.
    Ведь все что надо это при каждым запросом просто запоминать текущий url, и при нажатии кнопки назад брать этот url и запускать функцию:
    ajax('get',url);
    --- Сообщения объединены: 1 янв 2017 ---
    Это то понятно, но это ничего не меняет, почему-то при нажатии кнопки назад он загружает главную страницу.
    Значит мне надо именно как-то правильно загружать записи в pushstate, я пока сделал так, но оно не работает:
    Код (Javascript):
    1. $.ajax({
    2. type: 'GET',
    3. url: href+'?ajax=true',
    4. dataType: 'json',
    5. success: function(json){
    6. $('.content').html(json.content);
    7. $(".sidebar").html(json.sidebar);
    8. document.title = "HR | " + json.title;
    9. $("[disabled='disabled']").removeAttr("disabled");
    10. /* ВОТ PUSHSTATE: */
    11. history.pushState({page:location.pathname}, "HR | " + json.title, href);
    12.  
    13. }
    14. });
    Вот такие данные я получаю для вставки на страницу:
    http://w-0rld.ru/news/?ajax=true
    Вот сами посмотрите: http://w-0rld.ru
     
  10. Negezor

    Negezor Участник Пользователь

    Баллы:
    36
    Это точно, я любитель всяких full ajax приложений, обычно всё работает по системе HMVC.
    --- Сообщения объединены: 1 янв 2017, предыдущее сообщение: 1 янв 2017 ---
    1, зачем ты добавляешь pust state при любом AJAX запросе? Так как при возвращении на кнопку назад ты просто не дашь пользователю вернутся вперёд.
    2, зачем ты пишешь столько ненужных данных?
    3, браузер при нажатие кнопки вперёд или назад сам вызывает событие popstate, а это действие нужно остановить.
     
  11. Cames

    Cames Старожил Пользователь

    Баллы:
    153
    Skype:
    sky_meg
    Не везде классы нужны, не везде классы важны)
     
  12. Negezor

    Negezor Участник Пользователь

    Баллы:
    36
    Но ведь был пример модуля, идеально для создание класса, да и есть babel.
     
  13. Cames

    Cames Старожил Пользователь

    Баллы:
    153
    Skype:
    sky_meg
    В чужие проекты со своими чемоданами не приходят. Я работал в проекте, который велся 2 года до меня и сейчас, спустя год, ведется дальше без меня. Чтобы подключить ES6, достаточно добавить в лоадеры бабель, а чтобы переписать все с модулей на классы, нужно заново переписать весь проект.
     
  14. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    1. а как надо?
    2. каких данных?
    3. как?
     
  15. Cames

    Cames Старожил Пользователь

    Баллы:
    153
    Skype:
    sky_meg
    Помогу. Так точно делать не надо
    [​IMG]
    --- Сообщения объединены: 1 янв 2017, предыдущее сообщение: 1 янв 2017 ---
    1. Я скидывал выше пример, как можно сделать
    2. Не гоняй html в запросах, работай с чистыми данными
    3. Не обязательно останавливать, можно обработать. В любом случае эвент листенером.
     
  16. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Почему? Я думаю что гораздо легче через один запрос получать все что нужно.

    P.S я только обучаюсь js.
     
  17. Cames

    Cames Старожил Пользователь

    Баллы:
    153
    Skype:
    sky_meg
    Потому что лишние ненужные символы в json увеличивают длительность запроса. Это бэд практик.
     
  18. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Т.Е не использовать json вообще?
    или для каждого блока свой запрос?

    На мобильных устройствах, компах, и даже на 2G интернете все быстро грузится.
    Думаю забить на это, пусть юзвери берут нормальный интернет.
     
  19. Cames

    Cames Старожил Пользователь

    Баллы:
    153
    Skype:
    sky_meg
    Использовать json можно, но если тебе нужно передать информацию об успешности регистрации и ничего больше, как в твоем примере, то можно просто отправить 200, а не кусок верстки твоего сайта.

    Быстро грузится, пока блоки маленькие. Отправишь разок табличку 5х50, все сам увидишь.
     
  20. Автор темы
    W_0rld

    W_0rld Активный участник Пользователь

    Баллы:
    61
    Имя в Minecraft:
    World
    Все, тема закрыта. Нашел отличный гайд, который помог мне разобраться.
    + отказался от json при загрузке контента.
    Вот гайд: http://xozblog.ru/2014/10/html5-history-api/
     
  21. Negezor

    Negezor Участник Пользователь

    Баллы:
    36
    Всё как я и говорил, не нужно при AJAX запросе добавлять стейтмент в history, а отказываться от JSON ради того что бы получить только HTML контент ужасно! Следует познакомится с шаблонизаторами на JS или открыть для себя такую вещь как Angular JS.
     

Поделиться этой страницей