document.baseURI — базова адреса документа в JavaScript

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

Властивість 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 може змінюватися в залежності від контексту (наприклад, різні шляхи для розробницького та продуктивного середовищ), властивість baseURI стає незамінним інструментом. Вона допомагає в адаптації шляхів до активів без необхідності зміни коду, що підвищує ефективність роботи з ресурсами.

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

Порада

У сценаріях, де потрібно виконувати операції з документами, що були завантажені через XMLHttpRequest або fetch, властивість baseURI може виступати як вихідна точка для визначення відносних шляхів. Це особливо корисно, коли робота ведеться з документами, що містять відносні посилання на інші ресурси, і потрібно забезпечити їх коректне розгортання.

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

Порада

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

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

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

Синтаксис

Node.baseURI

Переглядачі

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

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

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

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

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

Приклади

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

// Припустимо, що поточний документ має URL: http://example.com/pages/article.html

console.log(document.baseURI);
// Виведе: "http://example.com/pages/article.html"

// Припустимо, маємо наступний 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"