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Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
3 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі при натисканні на кнопку "Змінити хеш URL" скрипт змінює хеш частину URL, що дозволяє користувачам взаємодіяти зі сторінкою та бачити, як змінюється URL. Такий підхід може бути корисним для односторінкових додатків (SPA), де зміна хешу в URL може використовуватися для навігації між різними частинами додатку без перезавантаження сторінки.
У цьому прикладі демонструється, як можна використовувати властивість Document.URL для отримання повного URL поточного веб-документа. Це особливо корисно, коли потрібно вивести або використати URL сторінки в скриптах, наприклад, для визначення поточного місцезнаходження користувача на сайті чи для створення динамічних посилань.
// Вивід поточного URL у консоль
console.log(document.URL);У цьому складнішому прикладі показано, як можна використати document.URL для перевірки, чи належить поточний URL до певного домену. Це корисно у випадках, коли потрібно виконати певні дії або показати специфічний контент залежно від домену, на якому знаходиться користувач.
// Перевірка належності поточного URL до певного домену
if (document.URL.includes("example.com")) {
console.log("Ви перебуваєте на сайті example.com");
} else {
console.log("Цей сайт не є example.com");
}