Обход блокировки всплывающих окон в браузерах: OAuth

Быстрый ответ

В целях обхода блокировщиков всплывающих окон, инициирование последних целесообразно осуществлять посредством пользовательских действий, таких как клики. Свяжите вызов window.open непосредственно с обработчиком события:

document.querySelector('button').onclick = () => window.open('https://example.com'); // Нажмите, чтобы открыть!

Данный подход является наиболее эффективным и безопасным для реализации отображения всплывающего окна.

Тайные механизмы блокировщиков всплывающих окон

Блокировщики всплывающих окон отдают предпочтение действиям, исходящим от пользователя, а не неожиданным всплывающим окнам. Старайтесь оставить стек вызовов JavaScript максимально простым, избегая сложных функций перед вызовом window.open.

OAuth-процессы и принцип неблокирующего взаимодействия

При процессе обхода блокировщиков для OAuth аутентификации важно не забывать о безопасности. Это предполагает использование надежных библиотек для аутентификации и применение модальных диалогов для обеспечения бесперебойного взаимодействия на странице.

Совместимость с различными браузерами

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

Работа с всплывающими окнами

Проверяйте возвращаемое значение window.open. Если оно null, то скорее всего, всплывающее окно было заблокировано:

let popUpWindow = window.open('https://example.com'); // 'Никаких уловок'
if (!popUpWindow) {
   // Укажите пользователю как добавить сайт в исключения
}

Составляйте понятные и четкие инструкции по добавлению сайта в исключения. При необходимости предложите пользователю альтернативный интерфейс с использованием эмуляции модального окна.

Обещания, обещания

Промисы упрощают взаимодействие с пользователем. Заверните вызов window.open в промис и обеспечьте адекватную обработку как успеха, так и ошибки:

new Promise((resolve, reject) => {
    let popUp = window.open(url); // 'Стучим в дверь'
    popUp ? resolve(popUp) : reject('Всплывающее окно заблокировано');
})
.then(window => /* ваш код здесь */)
.catch(error => /* ваш код здесь */);

Попытка номер два

Обеспечение быстрого доступа по клику

Привяжите window.open напрямую к событию onclick:

document.querySelector('#pop-link').onclick = function() {
  const pop = window.open('https://example.com');
  return !pop; // 'Пришел, попробовал, не сработало?'
};

Для ссылок с атрибутом target="_blank" используйте обработчик события onclick, чтобы можно было быстро отреагировать на блокировку.

Подробнее об этом расскажет наш спикер на видео

Альтернативы: модальные окна и новые вкладки

Если все всплывающие окна блокируются, то можно заменить их на новые вкладки или модальные окна на странице. Это способствует улучшению пользовательского опыта и меньше подвержено блокировке.

План Б: применение перенаправлений

Если на практике оказывается невозможным использовать всплывающие окна, воспользуйтесь перенаправлениями, особенно в рамках OAuth процедур. Вероятно, этот подход будет цениться пользователями и их браузерами.

Визуализация

Действие пользователя:  | Ожидаемый результат:
------------------------|---------------------
Пользователь нажимает   | 🎉 Всплывающее окно появляется
                         | (словно приглашение на праздник!)
------------------------|---------------------
Пользователь ничего не делает | ❌ Всплывающее окно не появляется
                              | (нежданные гости никому не нужны)

Основное правило: Празднество начинается, когда пользователь даёт сигнал!

Кратное сравнение

Преимущества:

• Ориентация на пользователя
• Соблюдение политики безопасности браузера
• Возможность контроля со стороны пользователя

Недостатки:

• Возможная необходимость в использовании плана Б и применении модальных окон
• Потенциальные сложности для пользователей без технических навыков
• Работа с разными браузерами может быть непредсказуемой

Лучшие практики

• Фокусируйтесь на пользовательском опыте
• Обеспечивайте доступность и понятность ваших решений
• Стремитесь к обеспечению универсальной совместимости в различных контекстах и браузерах
• Направляйте пользователей при взаимодействии с блокировщиками всплывающих окон

Полезные материалы

1. Как обойти блокировщики всплывающих окон – Stack Overflow — подробное обсуждение и понимание управления всплывающими окнами в JavaScript.
2. Создание модального окна с использованием CSS и JavaScript – W3Schools — пошаговое руководство по созданию неблокируемых модальных окон.
3. Встроенная валидация форм на веб-страницах – A List Apart — рекомендации по оптимизации валидации форм без ущерба для пользовательского опыта.
4. Введение в события браузера – JavaScript.info — подробное изучение веб-событий, которое поможет освоить взаимодействие с блокировщиками всплывающих окон.
5. UX дизайн: лучшие практики для модалей и всплывающих окон – Medium — полезная статья об эффективности создания функциональных модальных окон и всплывающих уведомлений для улучшения пользовательского опыта.