Недавно я изучаю магистралю. Когда вы научитесь понимать основу, вы должны сначала понять спа. При понимании спа, вы должны сначала понять, как одностраничные приложения могут изменить URL, не обновляя страницу.
По сравнению с прыгами на разные страницы, можно сказать, что Ajax значительно улучшил опыт просмотра пользователя. Очень приятно не видеть белый экран между переключением страниц. Тем не менее, многие более ранние приложения Ajax не поддерживали вперед и обратное движение браузера, что заставило пользователей немедленно вернуться к своей первоначальной позиции, где бы они ни просматривали на веб -сайте, и пользователи не могли переключить историю просмотра через кнопку вперед и обратного движения браузера.
Для первой проблемы это довольно легко решить. Просто используйте файлы cookie или localstorage, чтобы записать статус приложения. Прочитайте этот статус при обновлении страницы, а затем отправьте соответствующий запрос Ajax, чтобы изменить страницу. Но вторая проблема очень неприятная, давайте сначала поговорим о решении современных браузеров.
Решение HTML5
Чтобы понять, как HTML5 может продвигаться и назад, вы должны сначала понять объекты истории и объекты местоположения.
Объект истории
Свойства объекта истории
1.length: возвращает количество URL -адресов в списке истории браузеров. Для каждой страницы пользователь посещает текущий тег, этот номер добавляется 1. Из -за соображений конфиденциальности конкретный контент URL -адреса не виден.
2. Штат: объекты, связанные с текущим URL -адресом, могут быть добавлены или изменены только через PushState и SpearCestate. Мы можем использовать его для хранения информации, связанной с URL.
Метод объекта истории
1.history.back ()
Этот метод не имеет параметров. После запуска он вернется на предыдущую страницу, которая будет эквивалентна нажатию кнопки «Назад» браузера.
2.history.forward ()
Этот метод не имеет параметров. После запуска он вернется на страницу, которую вы просматриваете, прежде чем просмотреть, что эквивалентно нажатию на нажатие кнопки «Пряки браузера».
3.history.go (номер)
Этот метод принимает параметр переменной формирования, история. Go (-1) эквивалентен поддержке страницы, stister.go (1) эквивалентна продвижению страницы, история. Go (0) будет обновить текущую страницу.
4. History.pushstate (штат, название, URL)
Ключ к изменению URL и не освежающему странице. Этот метод изменит местоположение. После исполнения история. Length будет увеличена на 1. Этот метод принимает три параметра.
1. Штат: объект, связанный с текущим URL.
2. Название: заголовок страницы, но все браузеры игнорируют это. Чтобы изменить заголовок, вам все еще нужно использовать Document.title.
3.URL: URL с тем же доменом, что и текущая страница, местоположение. Href станет этим значением.
5. History.Replacestate (состояние, название, URL)
Этот метод такой же, как и выше, но он не изменит историю. Длина, но будет только изменять histore.state и location.href.
Обратите внимание, что третий параметр PushState и Replacetate не могут перекрестно домен и не будут запускать событие Popstate браузера и событие Onhashchange (протестировано под Chrome33).
объект местоположения
В дополнение к нажатию кнопки «Форвард/назад» и «Историческое событие», вы также можете изменить URL -адрес с помощью метода местоположения и изменить свойства местоположения:
Свойства объекта местоположения (читать и написать):
1. Host: mostmain name + номер порта
2. Hostname: доменное имя
3.port: номер порта
4. Протокол: протокол
5.Href: полный путь
6.Origin: протокол + доменное имя + порт
7. Hash: URL (хэш), начиная с знака фунта (#)
8. ПАНЕМА: Путь документа + Имя документа
9.Search :(?) Следующий контент
Вы можете достичь цели обновления, изменяя местоположение. Href или Location.hash.
Методы объекта местоположения:
1. Assign: Измените значение URL и добавьте текущий URL в историю. Length будет увеличиваться на 1. Location.assig ('#' + x) изменит URL -адрес, но не будет обновлять страницу.
2. Повторная загрузка: обновить страницу.
3. Постановка: Измените значение URL, но история. Длина остается неизменной. Тот же метод использования назначения.
Событие Popstate
При изменении URL -адреса, например, если пользователь нажимает кнопку Forward/Back, vitury.go (n) (n не равно 0), местоположение. Hash = x (x не равняется текущему местоположению. Hash) запустит это событие. Вы можете использовать его для мониторинга URL для реализации различных функций.
Кода -копия выглядит следующим образом:
window.onpopstate = function () {
// Do Sth
}
Событие Onhashchange
Изменение значения хэша вызовет событие POPState, а запуск события POPSTATE не обязательно запустит событие OnHashchange. После тестирования:
1. Изменения хеш, но местоположение. ПАТНАЛЬ ОСТАЕТСЯ НЕПРАВИЛЬНО, вызовет событие Onhashchange, такое как history.pushstate (",", '#abc');
2. Если хэш и местоположение.
Как писать старые браузеры
Старые браузеры не поддерживают Pushstate и Spearcestate, поэтому способ контролировать изменения URL -адреса через Popstate (на самом деле, он не поддерживает этот метод). Затем вы можете только изменить контент, стоящий за URL#, чтобы получить обновление, но они не поддерживают Onhashchange, поэтому вы безразлично к изменениям в URL (за исключением того, что страница будет прокручиваться до соответствующей позиции идентификатора страницы). Затем вы можете использовать только Ultimate Move: опрос и SetInterval для прослушивания значения URL. Так:
Кода -копия выглядит следующим образом:
var prevhash = window.location.hash;
var callback = function () {...}
window.setInterval (function () {
if (window.location.hash! = prevhash) {
prevhash = window.location.hash;
обратный вызов (Prevhash);
}
}, 100);
Конечно, это письмо очень расстраивает. Если вы не рассмотрите возможность нажать на тег с идентификатором на странице, чтобы изменить хэш, вы можете использовать шаблон проектирования, чтобы элегантно реализовать URL -адрес мониторинга. Например, классический шаблон наблюдателя использует класс для реализации функции изменения хэша, а затем и всех классов (наблюдателей), которые хотят прослушать изменения в URL -адресу для подписки на этот (наблюдатель) класс.
Кода -копия выглядит следующим образом:
// Измените класс URL
функция urlchanger () {
var _this = это;
this.observers = [];
// Добавить наблюдателя
this.addobserver = function (obj) {...}
// Удалить наблюдателя
this.deleteobserver = function (obj) {...}
// Уведомление наблюдателей
this._notifyobservers = function () {
var length = _this.observers.length;
Console.log (длина)
для (var i = 0; i <length; i ++) {
_This.observers [i] .update ();
}
}
// Измените URL
this.changeurl = function (hash) {
window.location.hash = hash;
_this._notifyobservers ();
}
}
// класс прослушивания
функция OneOfobServers () {
var _this = это;
this.update = function () {...}
}
//выполнить
var o1 = new urlchanger ();
var o2 = new OneOfobservers ();
o1.addobserver (O2);
o1.changeurl ('Fun/arg1/arg2/');
// o2 имеет STH ...