Открытие нового окна, а не вкладки, в Firefox с помощью JS

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

Чтобы открыть web-страницу в новом окне браузера, примените метод window.open() с указанием параметров width и height:

window.open('http://example.com', '_blank', 'width=600,height=400');

Важно учесть: настройки пользователя браузера могут изменить поведение этой команды и в результате страничка откроется на новой вкладке. В текущий момент нет возможности обойти эти настройки и гарантировать открытие строго в новом окне.

Настраиваем отображение окна для повышения вовлечения пользователя

Качество взаимодействия с пользователем имеет приоритетное значение. Открыв новое окно с конкретными габаритами, вы можете сфокусировать внимание пользователя на нужном контенте, отвлекая его от инструментальных панелей и адресного поля браузера.

Создайте окно без навигационной панели и меню вот так:

window.open('http://example.com', '_blank', 'width=600,height=400,toolbar=0,location=0,menubar=0');
// Минимализм во всей его прелестью!

Тем не менее, будьте внимательны: такие настройки как toolbar=0,location=0,menubar=0 могут активировать блокировку всплывающих окон или могут быть отвергнуты браузерами типа Firefox из-за несоответствия с пользовательскими предпочтениями.

Альтернативы при несовпадении с настройками браузера

Когда window.open() столкнется с настройками браузера, важно быть готовым к этому и предложить пользователям обходные пути. Отличным вариантом могут быть модальные окна, которые создают отдельное пространство прямо на странице.

Применяйте этот подход, если Firefox не открывает новые окна:

window.open('http://example.com', '_blank', 'modal=yes');
// У Firefox тоже есть своя нежная сторона!

Чтобы оставлять новое окно всегда в поле зрения, используйте параметр alwaysRaised=yes:

window.open('http://example.com', '_blank', 'width=600,height=400,alwaysRaised=yes');
// Иногда ваше окно должно обязательно оставаться на переднем плане.

Навигация через именованные целевые окна

Опираясь на именованные окна, можно управлять тем, куда поступит ваш контент:

window.open('http://example.com', 'uniqueWindowName', 'width=800,height=600');
// Как вам идея личного курьера для доставки вашего контента?

Использование одного и того же имени для окна будет гарантировать, что новый контент загружается в уже открытое окно. Это создаёт удобство и сохраняет контекст для пользователя.

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

📚.openNew('📗', { target: 'window' });
// Это больше, чем просто новый URL; это новое приключение!

🏠 -> 🚀 -> 🌌
// Мы отправляемся в путешествие в неизвестные дали, оставляя за собой уютный дом!

🏠 -> 🚪 -> 🏠🔗📙
// Либо вы можете расширить свои горизонты, оставаясь при этом в уютной домашней обстановке.

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

Итоги по совместимости

Проверьте, как параметры window.open() отрабатывают в разных браузерах, чтобы быть готовым ко всем неожиданностям. Инструменты разработчика в Chrome, Firefox и Edge помогут вам в этом.

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

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

1. Метод open() Окна – Web API | MDN
2. Метод окна open()
3. Firefox – JavaScript открытие в новом окне, а не вкладке – Stack Overflow
4. Всплывающие окна и методы окон
5. Диалог | jQuery UI
6. Как открыть URL в новой вкладке, а не в новом окне с помощью JavaScript – Stack Overflow