JS властивість Object.name


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

Властивість name об'єкта Window у JavaScript є важливим інструментом для управління вікнами браузера. Ця властивість дозволяє встановлювати або отримувати назву вікна браузера. Назва вікна використовується для ідентифікації вікна в контексті скриптів, особливо коли мова йде про взаємодію між батьківськими та дочірніми вікнами. Ця властивість особливо корисна у розробці веб-додатків, які потребують такої взаємодії, наприклад, в системах, що використовують вікна для аутентифікації користувача або показу інформації без перезавантаження основної сторінки.

Змінити або отримати назву вікна можна дуже просто. Якщо ви хочете встановити назву, використовуйте наступний синтаксис: window.name = "назва вікна";. Щоб отримати поточну назву вікна, використовуйте console.log(window.name);. Це дозволить вам побачити назву вікна в консолі браузера.

Розглянемо більш складний приклад використання властивості name. Припустимо, у вас є веб-додаток, де потрібно відкрити додаткове вікно для авторизації користувача. Ви можете використовувати властивість name, щоб забезпечити взаємодію між цими вікнами. Наприклад:

// Відкриття нового вікна для аутентифікації
let authWindow = window.open(url, "authWindow");

// Перевірка вікна
if (authWindow.name === "authWindow") {
    // Логіка обробки авторизації
}

У цьому прикладі відкривається нове вікно з назвою "authWindow". Потім можна перевірити назву відкритого вікна, щоб впевнитися, що скрипт взаємодіє саме з потрібним вікном.

Важливо також зазначити, що властивість name має деякі обмеження та особливості. По-перше, враховуйте політику безпеки між доменами: скрипт з одного домену не може змінити name вікна, яке належить іншому домену. По-друге, властивість name зберігається протягом сесії браузера, тобто навіть після перезавантаження сторінки назва вікна залишиться незмінною, якщо її не змінити вручну.

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

автор: Bond

Порада

Зміна імені вікна може призвести до проблем із доступом до нього, тому будьте обережні та використовуйте її ретельно.

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

Для запобігання неочікуваним результатам, задайте ім'я вікна на ранній стадії, наприклад, при завантаженні сторінки, щоб мати змогу легко звертатися до нього пізніше.

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

Уникайте конфліктів імен, надавши вікнам унікальні ідентифікатори, що відображають їх функцію або призначення.

автор: Bond

Синтаксис

Window.name

Переглядачі

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

Приклади

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

У цьому прикладі ми відкриваємо вікно-попап із використанням методу "window.open". Потім ми отримуємо ім'я вікна-попапа та змінюємо його за допомогою властивості "name". Це може бути корисно при взаємодії з вікнами-попапами та їх ідентифікацією.

HTML

<button id="open">Відкрити попап</button>

JS

document.getElementById('open').addEventListener('click', () => {
    var popup = window.open('', 'popupWindow', 'width=400,height=200');

    if (!popup) {
        console.log('Спливне вікно заблоковано');
        return;
    }

    console.log("Ім'я вікна-попапа: " + popup.name); // 'popupWindow'

    popup.name = 'renamedPopup';
    console.log("Оновлене ім'я: " + popup.name);
});
автор: Bond

Цей приклад демонструє використання властивості "Window: name property". Кнопка "Встановити ім'я вікна" дозволяє користувачу ввести нове ім'я для вікна, а кнопка "Показати ім'я вікна" виводить поточне ім'я вікна у вигляді повідомлення на сторінці.

автор: Bond

У цьому прикладі ми встановлюємо ім'я вікну за допомогою властивості "name" і виводимо його в консоль. Це може бути корисно, наприклад, при створенні множини вікон для різних завдань, ім'я вікна може служити як ідентифікатор.

// Встановлюємо ім'я вікну
window.name = "Головна сторінка";

// Отримуємо ім'я вікна та виводимо його в консоль
console.log("Ім'я вікна: " + window.name);
автор: Bond

Коментарі

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

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

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

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

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

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

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

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

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

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

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

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