NavigateEvent: navigationType 屬性

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性: 這是一項實驗性技術
在生產中使用此技術之前,請仔細檢查瀏覽器相容性表格

NavigateEvent 介面的只讀屬性 navigationType 返回導航的型別——pushreloadreplacetraverse

表示導航型別的列舉值。

可能的值為

  • push: 導航到一個新位置,導致將新條目推送到歷史記錄列表。
  • reload: 重新載入 Navigation.currentEntry
  • replace: 將 Navigation.currentEntry 替換為新的歷史記錄條目。此新條目將重用相同的 key,但會被分配一個不同的 id
  • traverse: 瀏覽器從一個現有歷史記錄條目導航到另一個現有歷史記錄條目。

示例

具有特殊後退/前進處理的非同步過渡

有時希望特別處理後退/前進導航,例如,透過將快取的檢視過渡到螢幕來重用它們。這可以透過以下方式實現分支:

js
navigation.addEventListener("navigate", (event) => {
  // Some navigations, e.g. cross-origin navigations, we
  // cannot intercept. Let the browser handle those normally.
  if (!event.canIntercept) {
    return;
  }

  // Don't intercept fragment navigations or downloads.
  if (event.hashChange || event.downloadRequest !== null) {
    return;
  }

  event.intercept({
    async handler() {
      if (myFramework.currentPage) {
        await myFramework.currentPage.transitionOut();
      }

      let { key } = event.destination;

      if (
        event.navigationType === "traverse" &&
        myFramework.previousPages.has(key)
      ) {
        await myFramework.previousPages.get(key).transitionIn();
      } else {
        // This will probably result in myFramework storing
        // the rendered page in myFramework.previousPages.
        await myFramework.renderPage(event.destination);
      }
    },
  });
});

規範

規範
HTML
# dom-navigateevent-navigationtype-dev

瀏覽器相容性

另見