JS властивість Document.baseURI
Загальний опис
Властивість baseURI повертає базовий URI (Uniform Resource Identifier) поточного документа, що є основою для розв'язання відносних URI в документі. baseURI автоматично наслідується всіма вузлами в документі, надаючи єдиний базовий URI, який може бути використаний для визначення повних шляхів до ресурсів, зазначених у відносних URI.
Основна корисність baseURI полягає у спрощенні доступу та управління ресурсами веб-сторінки, зокрема при роботі з великими веб-додатками, де ресурси (такі як зображення, скрипти, таблиці стилів тощо) можуть бути розміщені в різних піддиректоріях. Використання baseURI дозволяє розробникам легко змінювати базові шляхи до ресурсів, не змінюючи відносні URI у кожному посиланні, що робить код більш гнучким і легким для підтримки.
Для використання baseURI не вимагається жодних спеціальних дій або методів; ця властивість доступна для читання безпосередньо з будь-якого вузла документа. Вона повертає рядок, що представляє базовий URI документа, який за замовчуванням є адресою документа, але може бути змінений за допомогою вказівки базового URI у тезі <base> в HTML-документі.
Розглянемо приклад використання baseURI:
// Припустимо, що базовий URI документа встановлено на "https://example.com/subdir/"
console.log(document.baseURI); // Виводить: "https://example.com/subdir/"
// Якщо в документі є елемент із відносним посиланням, наприклад <img src="images/pic.jpg">
var imageElement = document.querySelector("img");
console.log(imageElement.src); // Виводить повний шлях: "https://example.com/subdir/images/pic.jpg"
У цьому прикладі baseURI документа використовується для автоматичного розширення відносного шляху до зображення до повного URI, виходячи з базового адресу. Це демонструє, як baseURI спрощує роботу з відносними URI, автоматично враховуючи базовий шлях.
У більш складних сценаріях, наприклад, при роботі з веб-компонентами або в рамках великих SPA (Single Page Applications), baseURI може бути особливо корисним для управління шляхами до ресурсів, зберігаючи при цьому чистоту та організованість коду. Розробники можуть динамічно змінювати baseURI за допомогою JavaScript, щоб відповідати різним умовам завантаження ресурсів, що робить baseURI незамінним інструментом у їхньому арсеналі.
| Порада: | Для динамічного веб-сайту або застосунку, де базова URI може змінюватися в залежності від контексту (наприклад, різні шляхи для розробницького та продуктивного середовищ), властивість |
| Порада: | У сценаріях, де потрібно виконувати операції з документами, що були завантажені через |
| Порада: | Пам'ятайте про важливість використання |
Синтаксис
Node.baseURIЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
4 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми демонструємо просте використання властивості baseURI для отримання базового URI поточного документа.
// Припустимо, що поточний документ має URL: http://example.com/pages/article.html
console.log(document.baseURI);
// Виведе: "http://example.com/pages/article.html"
У цьому прикладі ми розглядаємо більш складний сценарій, де baseURI використовується для визначення базового URI для динамічного завантаження зображень з різних частин документа.
// Припустимо, маємо наступний HTML-документ з визначеним базовим URI
// <base href="http://example.com/assets/">
// Додаємо нове зображення до документа
function addImage(imagePath) {
let image = document.createElement('img');
// Використовуємо baseURI для формування повного шляху до зображення
image.src = document.baseURI + imagePath;
document.body.appendChild(image);
}
// Додаємо зображення "photo.jpg", використовуючи відносний шлях
addImage('images/photo.jpg');
// В кінцевому підсумку, src зображення буде "http://example.com/assets/images/photo.jpg"