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

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

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

Location.host повертає комбінацію імені хоста та порту URL (якщо порт вказаний), у форматі hostname:port. Якщо порт не вказаний у URL, то повертається лише ім'я хоста. Наприклад, для URL http://example.com:80/path, властивість host поверне example.com:80. Це корисно для визначення бази URL для AJAX-запитів або при перенаправленні користувачів на відповідні хости.

Слід зауважити, що location.host є доступною тільки для читання в більшості браузерів, але в деяких випадках (зокрема, при роботі з iframe) можливо змінювати її значення для перенаправлення на інший URL.

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

1. Отримання поточного хосту: Щоб отримати хост поточного URL, можна використовувати код:

    let currentHost = window.location.host;
    console.log(currentHost);
   

   Цей код виведе ім'я хоста та порт (якщо він присутній) поточної сторінки.

2. Умовна логіка на основі хосту: Можна використовувати location.host для написання умовних інструкцій, що залежать від хосту:

    if (window.location.host === "example.com") {
   	 // Дії для домену example.com
    } else {
   	 // Дії для інших доменів
    }
   

   Такий підхід часто використовується для відокремлення коду, що виконується в різних середовищах (наприклад, розробницькому і продуктивному).

3. Зміна хосту в iframe: У певних ситуаціях, як-от при роботі з iframe, можливо змінити location.host для перенаправлення на інший хост:

    let iframe = document.getElementById("myIframe");
    iframe.contentWindow.location.host = "newexample.com";
   

   Однак такі дії можуть бути обмежені політикою однакового походження (same-origin policy).

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

правити

Порада

Щоб отримати інформацію про хост та порт поточної веб-сторінки, використовуйте властивість location.host. Це особливо корисно при розробці мультидоменних додатків, де потрібно знати, на якому хості знаходиться користувач. Наприклад, console.log(window.location.host) виведе хост та порт поточної веб-сторінки у консоль.

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

Порада

Якщо ви розробляєте додаток, який повинен реагувати на зміну хосту або порту, регулярно перевіряйте властивість location.host. Це можна робити, наприклад, використовуючи setInterval для періодичної перевірки, що дозволить адаптувати додаток до змін у мережі.

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

Порада

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

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

Порада

Коли ви використовуєте location.host для перенаправлення користувачів на різні домени або піддомени, завжди перевіряйте безпеку URL, щоб уникнути атак, пов'язаних з міжсайтовим скриптингом (XSS). Наприклад, переконайтеся, що хост, на який ви перенаправляєте, є довіреним та не містить шкідливого коду або небажаних параметрів.

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

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

Синтаксис

location.host

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<button id="go">Перейти згідно з хостом</button>

function redirectToAppropriateSite() {
    let host = window.location.host;
    let newPath;

    // умовне перенаправлення залежно від хосту
    if (host === 'css.in.ua') {
        newPath = 'https://css.in.ua/css/properties';
    } else {
        newPath = 'https://css.in.ua';
    }

    console.log('Поточний хост:', host || '(порожній у пісочниці)');
    window.location.href = newPath;
}

document.getElementById('go').addEventListener('click', redirectToAppropriateSite);

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