JavaScript window.open() — відкрити нове вікно або вкладку


Метод window.open() відкриває нову вкладку або вікно й повертає посилання на нього.

автор: NagarD

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

Головне, що треба знати: браузер заблокує виклик, якщо той стався не у відповідь на дію користувача. Відкрити вікно з setTimeout чи після await не вийде — і це не баг, а захист від спливаючої реклами.

Друге — безпека. Відкрита сторінка отримує посилання на твою через window.opener і може підмінити її вміст (фішинг). Тому в параметрах завжди варто передавати noopener.

Повертає null, якщо вікно заблоковано — за цим можна відловити блокувальник і чесно сказати користувачу, що робити.

автор: NagarD

Нотатка

Виклик поза обробником дії користувача не спрацює: браузер його заріже. Це стосується й коду після await — контекст «дії користувача» до того моменту вже втрачено.

автор: NagarD

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
open 1+ 1+ 1+ 3+ 12+ 5+
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
open yes yes yes yes

Приклади

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

Відкриття з noopener і перевіркою на блокувальник.

HTML

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

JS

document.getElementById('open').addEventListener('click', () => {
    // noopener: нова сторінка не отримає доступу до нашої
    const win = window.open('https://css.in.ua', '_blank', 'noopener');

    if (win === null) {
        alert('Схоже, спливаючі вікна заблоковано');
    }
});

// а так НЕ спрацює — браузер заріже:
// setTimeout(() => window.open('/page'), 1000);
автор: NagarD

Коментарі

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

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

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

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

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

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

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

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

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

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

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