«Резюме фронтенда», как изменить URL-адрес, не обновляя страницу

JavaScript браузер

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

Введение

Поскольку наши часто используемые http-запросы обычно основаны на реализации объектов XHR или реализациях выборки, эта операция запроса не вызывает изменение URL-адреса браузера, поэтому, хотя данные могут быть запрошены и отображены на странице в обычном режиме, если пользователь работает на текущей странице Когда получен запрос на получение и получен определенный фрагмент данных, и вы хотите поделиться просматриваемым в данный момент интерфейсом с другими через ссылку, URL-адрес браузера в это время не изменится, и вы можете получить доступ только к интерфейс инициализации данных через ссылку не может достичь желаемого эффекта. Как показано ниже:

(При простом использовании ajax или fetch для реализации запроса на получение) Когда мы переключаем список на вторую страницу на этой странице, URL-адрес браузера не меняется, поэтому копирование ссылки другим пользователям для ее открытия не приведет к переключению результата списка на вторую страницу, а повторной его инициализации.

Процесс реализации

С учетом вышеизложенного фона и вопросов мы можем подумать о том, как этого можно достичь? Моей первой реакцией было использовать для этого API местоположения, мы можем использовать location.search для чтения и записи параметров запроса браузера:

location.search = '?page=2';

Хотя этот код может изменить URL-адрес браузера, как показано ниже:

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

Вот основная мысль нашей статьи:history API.

history API

Window.history — это свойство только для чтения, используемое для получения ссылки на объект History, который предоставляет интерфейс для управления историей сеансов браузера (страницы, посещенные в адресной строке браузера, и страницы, загруженные через фреймворк на текущей странице). В HTML5 появились методы history.pushState() и history.replaceState(), которые соответственно добавляют и изменяют записи истории.

Используйте history.pushState() для изменения реферера, который используется в заголовке HTTP, когда пользователь отправляет запрос XMLHttpRequest, и реферер объекта XMLHttpRequest, созданного после изменения состояния, будет изменен. Поскольку реферер — это URL-адрес, который идентифицирует документ в объекте окна, представленном this, при создании объекта XMLHttpRequest.

Затем мы можем использовать pushState для реализации нашей функции обновления URL-адреса браузера.

Метод pushState()

pushState() принимает три аргумента: объект состояния, заголовок (пока игнорируется) и (необязательно) URL:

  • государственный объект— Состояние объекта состояния — это объект JavaScript, который создает новые записи в истории с помощью pushState(). Всякий раз, когда пользователь переходит к новому состоянию, запускается событие popstate, а свойство состояния этого события содержит копию объекта состояния записи истории.
  • заглавие— Firefox в настоящее время игнорирует этот параметр, но может использовать его в будущем. Передача здесь пустой строки должна обезопасить от будущих изменений этого метода. Кроме того, вы можете передать короткий заголовок для состояния перехода.
  • URL— Этот параметр определяет новую историческую запись URL. Обратите внимание, что браузер не загружает этот URL-адрес сразу после вызова pushState() , но может загружать URL-адрес позже при определенных обстоятельствах, например, когда пользователь повторно открывает браузер. Новый URL-адрес не обязательно должен быть абсолютным путем. Если новый URL-адрес является относительным, он будет рассматриваться как относительный к текущему URL-адресу. Новый URL-адрес должен иметь то же происхождение, что и текущий URL-адрес, иначе pushState() вызовет исключение. Этот параметр является необязательным и по умолчанию соответствует текущему URL-адресу.

выполнить

/**
 * 设置浏览器url
 *  params：queryObj（参数对象）
*/
function setBrowserUrl(queryObj){
    // stringify是queryString的一个api，具体可以查看node官网，也可以自己实现
    var url = `${location.pathname}?${stringify(queryObj)}`
    history.pushState({url: url}, '', url)
}

Таким образом, мы можем вызвать метод setBrowserUrl для изменения URL-адреса браузера одновременно с запросом. Далее мы можем отслеживать изменения url браузера, если url браузера имеет требуемые параметры запроса, то мы будем запрашивать данные согласно параметрам запроса, а если нет, то будем инициализировать страницу, чтобы при просмотре записи или маленький секрет, я хочу сохранить данные и поделиться ими с другими, можно ли этого добиться?

Суммировать

На основе истории H5 можно реализовать множество элегантных инструментов, таких как маршрутизация, управление кешем и так далее. Если вы хотите узнать больше о интерфейсных знаниях и практике, таких как webpack, gulp, css3, javascript, nodeJS, canvas и т. д., присоединяйтесь к нам в общедоступной учетной записи «Интересный интерфейс», чтобы учиться и обсуждать вместе и исследуйте границы интерфейса вместе.

больше рекомендаций

Категории