如何在HTML中通过Navigation API的destination.url获取即将导航到的目标地址-html教程-PHP中文网

navigation api 的 destination.url 仅在 navigate 事件回调中可用，是解析后的完整 url，不可全局访问；它不适用于 location.href 跳转或表单提交，且跨域 iframe 或地址栏手动输入时可能为空或被屏蔽。

如何在html中通过navigation api的destination.url获取即将导航到的目标地址

Navigation API 的 `destination.url` 只在导航事件中可用，不能直接读取

你无法在任意时刻访问 destination.url——它不是全局属性，也不是 window 或 document 上的可读字段。它只存在于 navigate 事件的 event.destination 对象中，且仅在浏览器触发导航时（比如点击链接、调用 navigation.navigate()）同步提供。

常见错误是试图在页面加载后或点击前就去读 navigation.destination?.url，结果得到 undefined 或报错 Cannot read property 'url' of undefined。

navigate 事件是唯一能安全访问 event.destination.url 的时机
该事件在导航开始时触发，但尚未提交（可被 event.preventDefault() 阻止）
不适用于传统 location.href 跳转或表单提交——这些不会触发 navigate 事件

监听 `navigate` 事件并提取 `destination.url`

必须显式监听 navigation.addEventListener('navigate', ...)，并在回调中取值。注意：navigation 是全局的 Navigation 实例（Chrome 110+，Firefox 尚未支持，Safari 无计划）。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

navigation.addEventListener('navigate', (event) => {
  // ✅ 正确：event.destination 存在且有 url 属性
  const targetUrl = event.destination.url;
  
  // 可选：阻止默认行为，实现自定义路由逻辑
  if (targetUrl.startsWith('/admin/')) {
    event.preventDefault();
    loadAdminPage(targetUrl);
  }
});

event.destination.url 是解析后的完整 URL（如 https://example.com/about），不是相对路径
如果导航由 history.pushState() 触发，event.destination 仍存在，但 event.canIntercept 为 false，此时无法 preventDefault()
SPA 框架需主动适配：React Router / Vue Router 当前均未默认启用 Navigation API，需手动桥接

为什么 `destination.url` 有时为空或不是预期值

不是所有导航都携带有效 destination.url。典型场景包括：

用户手动输入地址栏并回车 → event.destination 为 null（Chrome 行为，规范允许）
跨域 iframe 内导航 → destination.url 被屏蔽为 about:blank 或空字符串（同源策略限制）
导航被重定向多次（如 302）→ event.destination.url 是初始目标 URL，不是最终跳转地址
使用 navigation.navigate() 时传入相对路径但未指定 baseURL → 解析可能出错，建议始终传入绝对 URL

替代方案：当 Navigation API 不可用或不适用时

如果你的目标只是“知道用户点的是哪个链接”，而不用拦截导航，destination.url 其实是过度设计。更简单可靠的方式是：

给链接加 data-* 属性：<a href="/product" data-track="product-list">...</a>，然后监听 click 事件取 dataset.track
监听 beforeunload 或 pagehide 时读 document.referrer（仅限来源，非目标）
对 pushState/replaceState 调用点统一埋点，而非依赖事件捕获