Navigation：reload() 方法

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Navigation 接口的 reload() 方法重新加载当前 URL，同时更新历史记录条目列表中对应的条目的状态。

语法

js
reload()
reload(options)

参数

options 可选

包含以下属性的选项对象：

state 可选

开发者定义的信息，将在导航完成后存储在关联的 NavigationHistoryEntry 中，可通过 getState() 检索。这可以是任何数据类型。例如，你可能希望存储页面访问次数以用于分析目的，或者存储 UI 状态详细信息，以便视图可以与用户上次离开时​​完全相同地显示。存储在 state 中的任何数据都必须是可结构化克隆的。

info 可选

开发者定义的信息，将传递给 navigate 事件，可在 NavigateEvent.info 中获取。这可以是任何数据类型。例如，你可能希望根据导航方式（向左滑动、向右滑动或返回主页）以不同的动画显示新导航的内容。可以传入一个字符串来指示要使用哪种动画，该字符串可作为 info 选项传入。

返回值

包含以下属性的对象：

committed

当可见 URL 发生改变并且新的 NavigationHistoryEntry 被创建时被兑现的 Promise。

finished

当 intercept() 处理器返回的所有 promise 都被兑现时被兑现的 Promise。这相当于当 navigatesuccess 事件触发时，兑现 NavigationTransition.finished promise。

如果导航由于某种原因失败，则这两个 promise 中的某一个会被拒绝。

异常

DataCloneError DOMException

如果 state 参数中包含不可结构化克隆的值，则抛出此异常。

示例

使用 info 和 state

js
async function handleReload() {
  await navigation.reload({
    info: { animation: "fade-in" },
    state: { infoPaneOpen: true },
  }).finished;

  // 更新应用程序状态
  // ...
}

重新加载页面并添加新的状态项：

js
async function handleReload() {
  await navigation.reload({
    state: { ...navigation.currentEntry.getState(), newState: 3 },
  }).finished;

  // 更新应用程序状态
  // ...
}

规范

Specification
HTML
# dom-navigation-reload-dev

浏览器兼容性

参见