JS властивість Document.documentURI


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

Властивість documentURI відіграє ключову роль у роботі з документами в мові програмування JavaScript, надаючи повний URI (Uniform Resource Identifier) поточного документа. Ця властивість є читабельною та записуваною, дозволяючи не лише отримувати доступ до URI документа, але й модифікувати його за певних умов. documentURI є надзвичайно корисним у розробці веб-додатків, адже вона дозволяє розробникам легко отримувати та маніпулювати адресою веб-сторінки, що, у свою чергу, може використовуватися для різноманітних завдань, таких як перенаправлення користувачів, аналітика відвідуваності сайту, чи управління контентом на основі URI.

Основне застосування documentURI - це отримання адреси поточного документа. Це може бути корисно, наприклад, для відображення адреси сторінки на самій сторінці або використання URI в логічних умовах для зміни поведінки веб-додатку в залежності від поточної адреси. Простий приклад використання:

console.log(document.documentURI);

Цей код виводить повний URI поточного документа в консоль, дозволяючи розробникам швидко перевірити або використовувати цю інформацію у подальшій логіці програми.

Модифікація URI

Хоча пряме модифікування documentURI не змінює адресу сторінки в браузері (для цього використовують window.location), ця властивість може бути змінена в документах, які були завантажені через XMLHttpRequest або фрейми, що дозволяє розробникам маніпулювати контентом або використовувати його для специфічних цілей, таких як тестування або створення динамічних веб-додатків. Приклад:

// Припускаємо, що documentURI було змінено в контексті XMLHttpRequest
document.documentURI = "https://example.com/new-page.html";

Практичне використання

documentURI може використовуватися для створення умовних інструкцій, які змінюють поведінку веб-додатку в залежності від поточного URI. Наприклад, можна перевіряти URI на відповідність певному шаблону і виконувати код на основі результату:

if (document.documentURI.includes("profile")) {
    console.log("Це сторінка профілю користувача.");
}

Це особливо корисно для односторінкових додатків (SPA), де вміст динамічно змінюється без перезавантаження сторінки, і потрібно виконувати різні дії залежно від поточного стану URI.

автор: Bond

Порада

При створенні функціоналу для збереження поточного стану веб-додатку (наприклад, для закладок або поділу посилання) "documentURI" може використовуватися для зберігання або поділу точного URI документа. Це забезпечує точне відновлення стану додатку або сторінки при повторному відкритті посилання.

автор: Bond
Порада

Для розробників, які працюють над веб-скрейпінгом або автоматизацією тестування веб-додатків, "documentURI" служить надійним способом визначення поточної адреси веб-сторінки. Це може допомогти у валідації переходів між сторінками або у зборі даних з конкретних URL.

автор: Bond
Порада

Оскільки "documentURI" повертає поточний URI документа як рядок, його можна використовувати для маніпулювання або зміни URI через JavaScript. Наприклад, можна розбити URI на складові (протокол, хост, шлях тощо) для детальнішого аналізу або модифікації. Такий підхід може бути корисним у розробці функціоналу перенаправлення або при створенні більш складних веб-додатків, що вимагають динамічного управління URL.

автор: Bond

Синтаксис

Document.documentURI

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 3 ≤12.1 17
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 1

Приклади

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

Цей скрипт JavaScript використовує властивість documentURI для аналізу поточної адреси веб-сторінки та динамічно перенаправляє користувача на іншу сторінку, якщо URI відповідає певному критерію. Наприклад, якщо користувач перебуває на тимчасовій сторінці, скрипт може автоматично перенаправити його на основну сторінку сайту.

if (document.documentURI.includes('/temporary-page')) {
  window.location.href = 'https://example.com/new-page';
}
автор: Bond

У цьому прикладі спочатку отримуємо джерело переходу на сторінку через document.referrer і аналізуємо його доменне ім'я за допомогою конструктора URL. Якщо доменне ім'я закінчується на trusted-domain.com, вважаємо, що користувач прийшов з довіреного джерела. В іншому випадку, користувача перенаправляють на сторінку з повідомленням про заборонений доступ. Цей метод дозволяє підвищити рівень безпеки веб-додатків, обмежуючи доступ до чутливого контенту.

console.log('Адреса документа:', document.documentURI);

document.addEventListener('DOMContentLoaded', function () {
    const referrer = document.referrer;

    if (referrer && new URL(referrer).hostname.endsWith('css.in.ua')) {
        console.log('Користувач прийшов із довіреного домену.');
    } else {
        console.log('Реферер порожній або чужий — тут можна було б перенаправити.');
    }
});
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід