Перенаправление, обновление и доступ к URL-адресу текущей страницы в JavaScript

Объект местоположения JavaScript

Вы можете использовать свойство window.location для доступа к URL-адресу текущей страницы.

Если вы хотите перейти на новую страницу, вы можете либо изменить свойство href объекта history, либо вызвать метод assign с новым URL-адресом в качестве аргумента.

location.href = "new url";
// or we can use 
location.assign("new url");

Для перенаправления без сохранения в истории:

location.replace("new url"); 

Для перезагрузки страницы:

window.location.reload()

Принудительное обновление

Мы можем передать true, чтобы перезагруженная страница приходила с сервера (вместо кеша). В качестве альтернативы мы можем использовать false для перезагрузки страницы из кеша.

//from cache
window.location.reload(); 
window.location.reload(false);
// from server
window.location.reload(true);

Свойства объекта местоположения

1. Href

Содержит полный URL-адрес страницы.

location.href; // current page url addresss

Когда мы присваиваем новое значение свойству, оно перенаправляет установленное для свойства значение url.

location.href = "https://google.com"; 

Обязательно добавьте http / https. В противном случае он делает запрос на той же странице.

2. Протокол

Содержит протокол (http,https,...) страницы.

location.protocol; // https:

3. Хост

Имя хоста веб-сайта с номером порта.

location.host; // medium.com 
// with port number 
var anchor = document.createElement("a");
anchor.href = "https://medium.com:4097
anchor.host // "medium:4097"

4. Имя хоста

Имя хоста веб-сайта.

location.host; // medium.com

5. Порт

Содержит номер порта. Если URL-адрес не содержит явного номера порта, он будет установлен на ''.

var anchor = document.createElement("a");
anchor.href = "https://medium.com:4097
anchor.port // "4097"

6. Путь

Содержит путь после имени хоста.

location.href; //https://medium.com/@jagathishsaravanan
location.pathname; // "/@jagathishsaravanan"

7. Поиск

Возвращает часть URL для поиска.

I am on page https://medium.com/search?q=javascriptjeep;
location.search; // ?q=javascriptjeep

8. Хеш

Содержит строку '#', за которой следует идентификатор фрагмента URL-адреса. Это будет полезно, когда у нас есть ссылки на одной странице.

Пример из MDN Web Docs:

<a id="myAnchor" href="/en-US/docs/HTMLHyperlinkElementUtils.href#Examples">Examples</a>

<script>
  var anchor = document.getElementById("myAnchor");
  console.log(anchor.hash); // Returns '#Examples'
</script>

9. Происхождение

Происхождение конкретного места.

consider we are at page : https://medium.com/search?q=javascriptjeep
location.origin; // https://medium.com

Методы

1. назначить

Загружает ресурс по URL-адресу, указанному в параметре.

location.assign("https://medium.com");

Это приведет к перенаправлению на medium.com.

2. перезагрузить

Метод Location.reload() перезагружает текущий URL, как и кнопка Обновить.

location.reload();

У него есть необязательный параметр forceReload ,, который по умолчанию равен false, когда forceReload равно true. Затем он загружает страницу с сервера, а не из кеша браузера.

location.reload(true);

3. заменить

Заменяет текущий ресурс на ресурс по указанному URL.

// consider we are google.com
// when we run this line 
location.replace("htts://medium.com")
// it will replace the current page and redirect to medium page

Отличие от метода assign() заключается в том, что после использования replace() текущая страница не будет сохранена в сеансе History, то есть пользователь не сможет использовать кнопку Назад для перехода к ней.

4. toString

Возвращает весь URL-адрес в виде строки.

location.toString();
// https://medium.com/search?q=javascriptjeep

Ссылка: MDN Web Docs.

Подпишитесь на Javascript Jeep🚙💨