location.href в JavaScript — адреса поточної сторінки

Загальний опис

Властивість href в об'єкті Location в JavaScript відіграє ключову роль у взаємодії з поточним URL веб-сторінки. Ця властивість надає повний URL адресу, який включає схему протоколу, хост, порт (якщо він вказаний), шлях, пошуковий запит (query string) та якір (fragment). Використання href є фундаментальним для розробки веб-додатків, оскільки воно дозволяє не тільки отримувати доступ до цілісної інформації URL, але й маніпулювати нею, що є особливо корисним для реалізації перенаправлень, змін у навігації тощо.

location.href можна використовувати як для читання, так і для запису, що робить його універсальним інструментом для роботи з URL адресами в браузері. При записі нового значення у href, відбувається перенаправлення браузера на нову адресу.

Приклади використання:

1. Отримання поточного URL: Для отримання повного URL поточної сторінки можна використовувати наступний код:

    let currentUrl = window.location.href;
    console.log(currentUrl);
   

   Цей код виведе на консоль повний URL адресу поточної сторінки.

2. Перенаправлення на іншу сторінку: Властивість href може використовуватися для перенаправлення користувача на інший URL:

    window.location.href = 'https://www.example.com';
   

   Цей код призведе до перезавантаження сторінки та перенаправлення користувача на вказаний URL.

3. Динамічна зміна URL без перезавантаження сторінки: Хоча пряме присвоєння href призводить до перенаправлення, існують сучасні методи (наприклад, history.pushState) для динамічної зміни URL без перезавантаження сторінки:

    history.pushState({}, '', '/new-page');
   

   Цей метод змінює URL, але не викликає перезавантаження сторінки, зберігаючи при цьому поточний стан.

location.href є потужним інструментом у розробці веб-додатків, який надає значні можливості для маніпулювання навігацією та адресацією в браузері. Його гнучке використання відіграє ключову роль у створенні інтерактивних та динамічних веб-сторінок.

правити

Порада

Використання властивості location.href дозволяє отримати повний URL поточної веб-сторінки, що є корисним при необхідності аналізу або модифікації поточної URL-адреси. Наприклад, це може бути використано для отримання параметрів запиту з URL. Переглянувши location.href, можна зрозуміти структуру URL та як її краще обробляти.

автор: Bond правити

Порада

Щоб перенаправити користувача на іншу сторінку, можна присвоїти нове значення властивості location.href. Це базовий метод перенаправлення в JavaScript, який є простим у використанні, але при цьому потрібно бути обережним, щоб не спричинити несподіваних перехідних дій в додатку.

автор: Bond правити

Порада

Перед зміною location.href для перенаправлення користувачів завжди переконайтеся, що новий URL є безпечним і валідним. Неправильне використання цієї властивості може призвести до вразливостей, пов'язаних з фішингом або іншими видами атак на безпеку.

автор: Bond правити

Порада

Важливо розуміти, що зміна location.href спричинить перезавантаження сторінки, що може вплинути на користувацький досвід та продуктивність веб-додатку. Тому, перед зміною location.href, варто розглянути альтернативні методи, такі як history.pushState для зміни URL без перезавантаження сторінки.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

location.href

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	≤12.1	12	3

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	1.7*

Приклади

+ запропонувати свій приклад у пісочниці

<button id="go">Перевірити умову</button>

function redirectToPage() {
    // умова: спецсторінку показуємо лише ввечері
    let condition = new Date().getHours() >= 18;

    if (condition) {
        window.location.href = 'https://css.in.ua';
    } else {
        console.log('Умова не виконалась — лишаємось тут');
    }
}

document.getElementById('go').addEventListener('click', redirectToPage);

<header>
  <h2 class="title">location.href</h2>
  <p class="description">Встановлення та отримання повного URL поточної сторінки</p>
</header>
<main>
  <div class="result">
    <button id="showCurrentUrl">Показати поточний URL</button>
    <p id="currentUrl"></p>
    <button id="redirectToGoogle">Перейти на Google</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  margin-right: 10px;
}

button:hover {
  background-color: #45a049;
}

#currentUrl {
  margin-top: 10px;
}

document.getElementById("showCurrentUrl").addEventListener("click", function () {
  document.getElementById("currentUrl").innerText = "Поточний URL: " + window.location.href;
});

document.getElementById("redirectToGoogle").addEventListener("click", function () {
  window.location.href = "https://www.google.com";
});
//# sourceURL=pen.js

// Отримання повного URL поточної сторінки
let currentURL = window.location.href;
console.log(currentURL);