Окно: событие pagereveal

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

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

Событие pagereveal срабатывает, когда документ впервые отрисовывается, либо при загрузке нового документа из сети, либо при активации документа (либо из кэша «назад/вперёд» (bfcache), либо при предварительной рендеринге).

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

Синтаксис

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

addEventListener("pagereveal", (event) => {});
onpagereveal = (event) => {};

Тип события

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

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

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

Примеры

window.addEventListener("pagereveal", async (e) => {
  // If the "from" history entry does not exist, return
  if (!navigation.activation.from) return;

  // Only run this if an active view transition exists
  if (e.viewTransition) {
    const fromUrl = new URL(navigation.activation.from.url);
    const currentUrl = new URL(navigation.activation.entry.url);

    // Went from profile page to homepage
    // ~> Set VT names on the relevant list item
    if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {
      const profile = extractProfileNameFromUrl(fromUrl);

      // 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 names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "none";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "none";
    }

    // Went to profile page
    // ~> Set VT names on the main title and image
    if (isProfilePage(currentUrl)) {
      // 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 names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }
  }
});

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

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

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

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

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

См. также

Использование API переходов
pageswap событие

© 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/pagereveal_event