Window: pageswap событие

Ограниченная доступность

Эта функция не является базовой, так как она не работает в некоторых из самых популярных браузеров.

Событие pageswap срабатывает при переходе между документами, когда предыдущий документ собирается загрузиться.

Это полезно в случае переходов между документами (MPA) переходов между представлениями для управления активным переходом с исходящей страницы навигации. Например, вы можете пропустить переход или настроить анимацию исходящего перехода с помощью JavaScript.

Также оно предоставляет доступ к типу навигации и текущим и целевым записям истории документа.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или задайте обработчик события.

addEventListener("pageswap", (event) => {});
onpageswap = (event) => {};

Тип события

Объект PageSwapEvent. Наследуется от Event.

Свойства события

PageSwapEvent.activation Только для чтения: Возвращает объект NavigationActivation, содержащий тип навигации и текущие и целевые записи истории документа для навигации в рамках одного домена. Если навигация содержит URL из другого домена в цепочке перенаправлений, она возвращает null.
PageSwapEvent.viewTransition Только для чтения: Возвращает объект ViewTransition, представляющий входящий междокументный переход между представлениями, если такой переход активен во время срабатывания события. В противном случае возвращает null.

Примеры

window.addEventListener("pageswap", async (e) => {
  // Only run this if an active view transition exists
  if (e.viewTransition) {
    const currentUrl = e.activation.from?.url
      ? new URL(e.activation.from.url)
      : null;
    const targetUrl = new URL(e.activation.entry.url);

    // Going from profile page to homepage
    // ~> The big img and title are the ones!
    if (isProfilePage(currentUrl) && isHomePage(targetUrl)) {
      // Set view-transition-name values on the elements to animate
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "name";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "avatar";

      // Remove view-transition-names after snapshots have been taken
      // Stops naming conflicts resulting from the page state persisting in BFCache
      await e.viewTransition.finished;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }

    // Going to profile page
    // ~> The clicked items are the ones!
    if (isProfilePage(targetUrl)) {
      const profile = extractProfileNameFromUrl(targetUrl);

      // Set view-transition-name values on the elements to animate
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "name";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "avatar";

      // Remove view-transition-names after snapshots have been taken
      // Stops naming conflicts resulting from the page state persisting in BFCache
      await e.viewTransition.finished;
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "none";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "none";
    }
  }
});

Примечание: См. Список участников команды Chrome DevRel для демонстрации в реальном времени, из которой взят этот код.

Спецификации

Спецификация
HTML # event-pageswap

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`pageswap_event`	124	124	Нет	110	18.2	124	Нет	82	18.2	27.0	124

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Window/pageswap_event