Pull to refresh

Введение в HTML5 History API

JavaScript *
Translation
До появления HTML5 единственное, что мы не могли контролировать и управлять (без перезагрузки контента или хаков с location.hash) — это история одного таба. С появлением HTML5 history API все изменилось — теперь мы можем гулять по истории (раньше тоже могли), добавлять элементы в историю, реагировать на переходы по истории и другие полезности. В этой статье мы рассмотрим HTML5 History API и напишем простой пример, иллюстрирующий его возможности.

Основные понятия и синтаксис


History API опирается на один DOM интерфейс — объект History. Каждый таб имеет уникальный объект History, который находится в window.history. History имеет несколько методов, событий и свойств, которыми мы можем управлять из JavaScript. Каждая страница таба(Document object) представляет собой объект коллекции History. Каждый элемент истории состоит из URL и/или объекта состояния (state object), может иметь заголовок (title), Document object, данные форм, позиция скролла и другую информацию, связанную со страницей.

Основные методы объекта History:
  1. window.history.length: Количество записей в текущей сессии истории
  2. window.history.state: Возвращает текущий объект истории
  3. window.history.go(n): Метод, позволяющий гулять по истории. В качестве аргумента передается смещение, относительно текущей позиции. Если передан 0, то будет обновлена текущая страница. Если индекс выходит за пределы истории, то ничего не произойдет.
  4. window.history.back(): Метод, идентичный вызову go(-1)
  5. window.history.forward(): Метод, идентичный вызову go(1)
  6. window.history.pushState(data, title [, url]): Добавляет элемент истории.
  7. window.history.replaceState(data, title [, url]): Обновляет текущий элемент истории
Читать дальше →
Total votes 51: ↑51 and ↓0 +51
Views 225K
Comments 22

Chrome history API — Epic Fail

Google Chrome Browser extensions
Sandbox
Chrome с момента своего рождения прошёл длинный и успешный путь, но так ли он хорош на самом деле? Не возьмусь утверждать о всех его гранях, но хочу попытаться привлечь внимание общественности к тем проблемам с которыми мне довелось столкнуться лично.

Несколько месяцев назад я решился на написание своего расширения для Хрома. В голове давно затаилась маленькая, но очень жгучая идея переделать страницу выдачи Истории chrome://history/. И вот что из этого получилось.
Читать дальше →
Total votes 39: ↑31 and ↓8 +23
Views 9.8K
Comments 12

Реализация одностраничного приложения средствами History API в ASP.NET MVC

ASP *
Sandbox
Добрый день уважаемые хабаровчане. На сайте уже не раз поднимался вопрос о проблеме создания одностраничных ajax приложений. С такой задачей некоторое время назад столкнулся и я. Однако я недоумевал, почему обладая возможностями html5 и мощью MVC я должен столько всего прописывать вручную, да еще и с помощью js.

Возможно именно [holywar=on]неприязнь к языку js[holywar=off] побудили меня создать простое решение, опирающиеся на возможности ASP.NET MVC. Далее, я подробно опишу проблемы, которые возникают при попытке создать одностраничное ajax приложение, и поэтапно рассмотрю создание полноценного решения.

Если стало интересно — добро пожаловать под кат (код и картинки прилагаются).
Читать дальше →
Total votes 33: ↑27 and ↓6 +21
Views 9.5K
Comments 19

Несколько находок

Website development *

Кроссдоменные запросы с помощью YQL


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

Позавчера, один уважаемый человек с форума javascript.ru с ником melky вскользь упомянул о каком-то странном, на первый взгляд, jQuery плагине, который называется jquery.xdomainajax.js
Пытливому уму программиста не нравятся всякие плагины, без понимания сути, поэтому я выковырял самую нужную часть:
var query = 'select * from html where url="http://javascript.ru/" and xpath="*"'
var url = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURI(query)+'&format=xml&callback=callback';
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
function callback(data) {
    console.log(data); //сам текст ответа находится в data.result[0]
}


Откройте консоль и зупустите код. Как видно, в запрос пихается урл сайта и XML запрос в виде xpath, ответ приходит в виде jsonp. Если в урле написать format=json, то ответ придет в виде объекта с тегами.
Дальше этого применения я не пошел, поэтому лучше сами изучите матчасть здесь: developer.yahoo.com/yql

В комментариях настаивают указать на ограничения по количеству запросов с одного IP и запросов, использующих accesskey, которого у нас нет (так что, скорее всего, можно забить :) ).

Еще немного
Total votes 51: ↑43 and ↓8 +35
Views 7K
Comments 28

Decoding HTML5

Website development *HTML *
Доброго времени суток!



Несколько дней назад в свет была выпущена книга под названием "Decoding HTML5", в которой, как вы уже могли догадаться речь идёт о нововведениях, которые появились с приходом HTML5. Не сказал бы, что книга была очень интересна мне, т.к. об этих новых рюшечках нововведениях не писал только ленивый, но всё-таки повторить и закрепить материал было полезным делом. Тем более, что книга написана небезызвестным Джефри, а это значит, что читать её будет легко и приятно. Но хватит расхваливать автора, а перейдём к краткому содержанию книги:
Читать дальше →
Total votes 40: ↑28 and ↓12 +16
Views 1.3K
Comments 23

Эксперимент со страницей результатов поиска

Яндекс corporate blog
Страница результатов поиска — одна из самых популярных страниц Яндекса. Её загружают около 130 миллионов раз в день. Это при среднем размере страницы в 25КБ дает нам 3ТБ трафика в сутки.

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

Развивая интерфейсы, обычно мы идём по эволюционному пути, меняем страницу поэтапно. Проверяем наши решения, внедряя их на небольшой процент пользователей, — проводим эксперименты. Нас уже не устраивают небольшие изменения: хотим развивать продукт, построив новую технологическую платформу, на которой в будущем будем реализовывать свои проекты.



Сегодня мы начинаем эксперимент с новой страницей результатов поиска. И для этого мы выбрали нашу площадку для тестирования поиска по мировому интернету — yandex.com.
Читать дальше →
Total votes 77: ↑71 and ↓6 +65
Views 33K
Comments 32

Навигация без перезагрузки используя expressjs, jade и History.js

Website development *JavaScript *Node.JS *
Tutorial
Мне ранее не доводилось использовать в своей работе такую возможность HTML5 как History API. И вот настал тот час, разобраться в этом и провести небольшой эксперимент. Результатом этого эксперимента я решил поделиться с Вами.

И так что мы хотим:
— Навигация по сайту с использованием history api
— Получения данных с сервера в виде json объекта с последующим рендером на клиенте
— При прямом переходе рендер должен происходить на сервере
— Что бы все было легко и просто
Читать дальше →
Total votes 21: ↑19 and ↓2 +17
Views 20K
Comments 22

Прекратите использовать location.hash, да здравствует HTML5 History API!

Website development *JavaScript *
Много лет location.hash был способом в AJAX-приложении заставить работать кнопки «Назад» / «Вперёд» и, например, добавить определенное состояние страницы в избранное и вернуться к нему позже.

Сейчас, когда HTML5 считается нормой, пора обратить свое внимание на History API и забыть про location.hash. HTML5 History API проще для понимания и позволяет сделать URL чуточку красивее (без кракозябры # или #! если вы имеете дело с индексированием ajax приложения).
Читать дальше →
Total votes 63: ↑46 and ↓17 +29
Views 74K
Comments 38

HistoryAPI: Как написать один раз, и чтобы голова не болела

JavaScript *jQuery *HTML *
Sandbox
Доброго времени суток!

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

  1. Они организованы так, что обрабатывают одинаково все ссылки;
  2. Можно отстрелить себе ногу и не понять — почему.

В данной статье рассматривается способ организации работы HistoryAPI так, чтобы потом не продавать душу дьяволу, чтобы всё работало.
Читать дальше →
Total votes 23: ↑6 and ↓17 -11
Views 9.1K
Comments 12

Роутинг и рендеринг страниц на стороне клиента с помощью History API и динамического импорта

Website development *JavaScript *Programming *


Доброго времени суток, друзья!

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

Исходный код на GitHub.

Поиграть к кодом можно на CodeSandbox.

Прежде чем приступить к реализации приложения, хотелось бы отметить следующее:

  • Мы реализуем один из самых простых вариантов клиентской маршрутизации и рендеринга, парочку более сложных и универсальных (если угодно, масштабируемых) способов можно найти здесь
  • Обойтись совсем без сервера не получится. Мы будет манипулировать историей текущей сессии браузера: при ручной перезагрузке страницы браузер отдает предпочтение серверу, т.е. пытается получить несуществующую страницу, что приводит к печальным последствиям в виде невозможности установить соединение (мои попытки обмануть браузер с помощью сервис-воркера, т.е. проксировать отправляемые им запросы, не увенчались успехом). Единственной задачей нашего примитивного сервера будет ответ в виде index.html на любой запрос. Это позволит браузеру перейти к выполнению клиенского скрипта
  • Везде, где это возможно и уместно, мы будет использовать динамический импорт. Он позволяет загружать только запрашиваемые ресурсы (раньше это можно было реализовать только посредством разделения кода на части (chunks) с помощью сборщиков модулей типа Webpack), что хорошо сказывается на производительности. Использование динамического импорта сделает почти весь наш код асинхронным, что, в целом, тоже неплохо, поскольку позволяет избежать блокировки потока выполнения программы

Итак, поехали.
Читать дальше →
Total votes 4: ↑3 and ↓1 +2
Views 4.3K
Comments 5