JS властивість Location.hostname

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

Властивість hostname в об'єкті Location в JavaScript займає важливе місце в контексті веб-розробки, відіграючи ключову роль в ідентифікації місцезнаходження поточної сторінки. Ця властивість повертає доменне ім'я URL, з якого було завантажено поточний документ. Наприклад, для URL http://www.example.com:80/path, hostname поверне www.example.com. Використання hostname важливе для розробників, які потребують розрізнити запити, що походять з різних доменів, або для реалізації логіки, що залежить від домену.

Властивість hostname є частиною глобального об'єкта window.location, який надає інформацію про поточний URL. На відміну від host, hostname не включає порт, навіть якщо він вказаний у URL.

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

Отримання hostname поточного URL: Стандартний приклад використання hostname полягає в отриманні доменного імені поточного URL:
```
 let currentHostname = window.location.hostname;
 console.log(currentHostname);
```
Цей код виведе доменне ім'я поточної веб-сторінки.
Умовні операції на основі hostname: hostname може бути використаний для розрізнення поведінки веб-додатку в залежності від домену:
```
 if (window.location.hostname === "example.com") {
	 // Специфічні дії для example.com
 } else {
	 // Специфічні дії для інших доменів
 }
```
Такий підхід корисний для розрізнення розвиткового та продуктивного середовищ.

Динамічна зміна поведінки залежно від hostname: Використання hostname для динамічної зміни налаштувань веб-додатку в залежності від домену, з якого він завантажується:

 switch (window.location.hostname) {
	 case 'development.example.com':
			 // Конфігурація для розробницького середовища
			 break;
	 case 'staging.example.com':
			 // Конфігурація для стейджингу
			 break;
	 case 'www.example.com':
			 // Конфігурація для продуктивного середовища
			 break;
	 default:
			 // Стандартна конфігурація
			 break;
 }

Загалом, hostname є надзвичайно корисною властивістю для розробників, які потребують розрізняти домени або виконувати специфічні операції в залежності від домену, з якого користувач доступається до додатку. Використання цієї властивості може значно підвищити гнучкість та адаптивність веб-додатків.

Порада:	Для отримання імені домену поточної сторінки без включення порту, використовуйте властивість `location.hostname`. Це корисно, коли потрібно адаптувати поведінку веб-додатку в залежності від домену, на якому він запущений. Наприклад, використання `console.log(window.location.hostname)` дозволить вивести ім'я домену в консоль.
Порада:	При створенні перехресних доменних запитів або при роботі з API, які мають різні кінцеві точки для різних доменів, `location.hostname` може бути використаний для динамічного визначення відповідного URL. Це дозволяє програмістам легко перемикатися між різними середовищами (наприклад, розробка, тестування, продакшн) без зміни коду.
Порада:	Уникайте прямого порівняння значення `location.hostname` з жорстко закодованими рядками, оскільки це може викликати проблеми при зміні доменних імен або при розгортанні на різних піддоменах. Замість цього, розгляньте можливість використання регулярних виразів або конфігураційних налаштувань для більш гнучкого визначення логіки обробки домену.
Порада:	При використанні `location.hostname` у безпекових цілях, наприклад, при валідації домену для перенаправлень чи аутентифікації, важливо проводити ретельну перевірку, щоб запобігти атакам, таким як фішинг чи спуфінг. Завжди переконуйтеся, що домен, який використовується, є довіреним та не змінюється неправомірно.

Синтаксис

location.hostname

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі, кнопка "Показати Hostname" дозволяє користувачу взаємодіяти з веб-сторінкою. Натискання на цю кнопку активує обробник подій, який використовує window.location.hostname для отримання імені хосту поточної сторінки та відображає його у параграфі з ідентифікатором "hostnameInfo". Це відмінний спосіб демонстрації динамічного використання властивості hostname у JavaScript.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/NWJXozM">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

// Визначення імені хосту поточної веб-сторінки
let currentHostname = window.location.hostname;
console.log(currentHostname);

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

// Функція для динамічної зміни вмісту сторінки
function customizeContentBasedOnDomain() {
    let hostname = window.location.hostname;
    
    if (hostname === "example.com") {
        document.body.style.backgroundColor = "lightblue";
        document.title = "Вітаємо на Example.com!";
    } else if (hostname === "anotherdomain.com") {
        document.body.style.backgroundColor = "lightgreen";
        document.title = "Ласкаво просимо на AnotherDomain.com!";
    } else {
        document.body.style.backgroundColor = "lightgrey";
        document.title = "Веб-сайт";
    }
}

customizeContentBasedOnDomain();

JS довідник

JavaScript

Наповнення JS розділу