Открытие в новой вкладке

Page.js — это легковесная библиотека для маршрутизации в одностраничных приложениях (SPA) на JavaScript. Она позволяет управлять переходами между «страницами» без перезагрузки браузера, используя pushState и обработку URL. Часто возникает необходимость не просто изменять состояние SPA, но и открывать некоторые маршруты в новой вкладке браузера. Рассмотрим, как это реализуется.

Использование атрибута target="_blank"

Наиболее простой способ открыть маршрут Page.js в новой вкладке — это стандартный HTML-атрибут target="_blank" у ссылки. При этом маршрутизация Page.js в новой вкладке будет работать, если правильно настроена начальная точка приложения.

<a href="/about" target="_blank">О нас</a>

При клике по такой ссылке браузер создаёт новую вкладку и загружает страницу по указанному URL. Page.js автоматически обработает этот URL, если приложение загружено и инициализировано в новой вкладке.

Ключевой момент: важно, чтобы на стороне сервера или при раздаче статических файлов был корректно настроен fallback на index.html, иначе при прямом переходе на URL, например /about, возникнет 404.

Программное открытие новой вкладки через JavaScript

Иногда требуется программно открыть маршрут Page.js в новой вкладке. Для этого используется метод window.open():

function openRouteInNewTab(path) {
    window.open(path, '_blank');
}

Пример вызова:

document.querySelector('#open-about').addEventListener('click', () => {
    openRouteInNewTab('/about');
});

Здесь важно учитывать, что:

  • window.open() создаёт новое окно или вкладку в зависимости от настроек браузера.
  • Page.js корректно обработает URL при загрузке новой вкладки, если приложение полностью загружено.

Сочетание Page.js с обработкой событий ссылок

В SPA часто ссылки управляются через обработчики событий. Чтобы различать обычный переход и открытие новой вкладки, используется проверка модификаторов событий:

document.addEventListener('click', function(event) {
    const link = event.target.closest('a');
    if (!link) return;

    const href = link.getAttribute('href');

    // Игнорировать ссылки с абсолютными URL
    if (href.startsWith('http')) return;

    // Проверка на модификаторы (Ctrl, Shift, Meta)
    if (event.ctrlKey || event.metaKey || event.shiftKey || link.target === '_blank') {
        return; // открыть в новой вкладке стандартным браузерным поведением
    }

    event.preventDefault();
    page(href);
});

Пояснения:

  • event.ctrlKey, event.metaKey, event.shiftKey проверяют, был ли использован модификатор для открытия ссылки в новой вкладке.
  • link.target === '_blank' позволяет оставить стандартное поведение браузера для ссылок с атрибутом target="_blank".
  • event.preventDefault() предотвращает стандартный переход и передаёт управление Page.js через page(href).

Динамические маршруты и открытие в новой вкладке

Если в приложении используются динамические маршруты, например /user/:id, важно корректно формировать URL при открытии новой вкладки:

const userId = 42;
const url = `/user/${userId}`;
window.open(url, '_blank');

Page.js правильно распознает динамический сегмент :id при инициализации маршрута:

page('/user/:id', ctx => {
    const id = ctx.params.id;
    console.log('Открыт пользователь с ID:', id);
});

Таким образом, открытие новых вкладок с динамическими маршрутами полностью совместимо с Page.js.

Ограничения и особенности

  1. PushState и новая вкладка: новая вкладка всегда инициирует полную загрузку приложения, поэтому важно, чтобы Page.js был корректно инициализирован на всех URL.
  2. Браузерные блокировки: window.open() может быть заблокирован всплывающим блокировщиком, если вызван не в контексте пользовательского действия (например, клика).
  3. SEO и серверная поддержка: при открытии URL напрямую на сервере должна быть настроена переадресация на SPA index.html, иначе будет 404.

Практическая рекомендация

  • Для статических ссылок используйте target="_blank" — это простой и надёжный способ.
  • Для динамических действий или кнопок используйте window.open(path, '_blank').
  • Для управления всеми переходами через Page.js добавьте проверку модификаторов событий и атрибута target="_blank".

Эти подходы обеспечивают корректное взаимодействие Page.js с открытием маршрутов в новых вкладках без нарушения работы SPA.

Оглавление