JS властивість Document.URL

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

Властивість document.URL є однією з ключових характеристик об'єкта Document у мові програмування JavaScript. Вона забезпечує доступ до повного URL-адреси веб-сторінки, на якій виконується поточний документ. Ця властивість відіграє вирішальну роль у розробці веб-додатків, дозволяючи розробникам отримувати та використовувати URL для різноманітних цілей, таких як навігація, аналітика або умовна логіка в залежності від адреси сторінки.

Використання властивості URL варіюється від простого витягування URL-адреси до її аналізу та використання в складних умовах. Простий приклад отримання URL-адреси поточної веб-сторінки може виглядати наступним чином:

console.log(document.URL);

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

Більш складне застосування може включати розбір URL для отримання специфічних частин адреси, таких як параметри запиту. Для цього можна використовувати об'єкт URL, який був доданий до сучасних веб-стандартів і забезпечує детальний аналіз складових частин URL:

let url = new URL(document.URL);
console.log(url.hostname); // Виводить доменне ім'я
console.log(url.pathname); // Виводить шлях сторінки
console.log(url.searchParams); // Виводить об'єкт URLSearchParams з параметрами запиту

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

Для веб-розробників важливо розуміти, що властивість document.URL є лише для читання та не може бути змінена безпосередньо. Для зміни URL, що відображається у веб-браузері, необхідно використовувати методи, такі як window.location.href = "новий URL" або history.pushState(), для додавання або зміни стану історії без перезавантаження сторінки.

На практиці, властивість document.URL є незамінним інструментом у розробці сучасних веб-додатків, дозволяючи розробникам ефективно взаємодіяти з URL веб-сторінок. Вона використовується в широкому спектрі задач, від базової навігації та аналітики до складних умовних логік та динамічної модифікації вмісту сторінки на основі параметрів URL. Усвідомлення потенціалу та обмежень цієї властивості є ключовим для створення ефективних і гнучких веб-додатків.

правити

Порада

Змінювати властивість document.URL напряму не можна, оскільки вона є лише для читання. Якщо вам потрібно змінити адресу сторінки, скористайтеся методами window.location.href або window.location.assign(). Це важливо розуміти для правильного управління навігацією у ваших JavaScript-додатках.

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

Порада

Використовуйте document.URL для розбору адреси сторінки на складові. Можна легко отримати доступ до різних частин URL, таких як протокол, хост, шлях, за допомогою нового URL об'єкта: let url = new URL(document.URL);. Після цього, доступ до, наприклад, протоколу можливий через url.protocol. Це зручно для роботи з URL, які потребують детального аналізу або модифікації.

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

Порада

Враховуйте, що властивість document.URL завжди повертає повний URL сторінки, включаючи протокол, хост, порт (якщо вказано), шлях та параметри запиту. Це робить її незамінною для скриптів, які потребують роботи з абсолютними URL. Для прикладу, якщо вам потрібно створити посилання на поточну сторінку, можна використати document.URL як значення атрибуту href у тега <a>, щоб забезпечити коректне перенаправлення користувачів.

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

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

Синтаксис

Document.URL

Переглядачі

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

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

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

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

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

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

Переглядач
	-	-

Приклади

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

// Вивід поточного URL у консоль
console.log(document.URL);

// Перевірка належності поточного URL до певного домену
if (document.URL.includes("example.com")) {
    console.log("Ви перебуваєте на сайті example.com");
} else {
    console.log("Цей сайт не є example.com");
}