如何用Javascript判断页面是通过<a href>标签跳转还是window.location.href打开？

数据老陈

2026-9-24

实现思路

浏览器没有原生API可以直接区分<a href>标签跳转和window.location.href跳转，两种导航行为默认都会被识别为普通导航（performance.navigation.type值为0）。我们可以通过sessionStorage加标记的方式实现区分，逻辑如下：

所有通过window.location.href触发跳转的位置，跳转前统一写入一个自定义标记
页面加载时判断：如果是页面刷新、或者没有读到保留状态的自定义标记（对应<a href>跳转、直接访问地址、外站跳转等场景），就清除DataTable的保存状态
状态判断完成后立即删除标记，避免后续页面访问出现误判

代码实现

第一步：修改所有window.location.href跳转逻辑

所有用到window.location.href跳转的位置，跳转前先加保留状态的标记：

// 写入保留状态标记
sessionStorage.setItem('keepDataTableState', '1');
// 执行原有跳转逻辑
window.location.href = '目标页面地址';

第二步：替换原有页面加载时的判断逻辑

// 兼容新旧性能API判断页面是否为刷新
const isReload = (performance.getEntriesByType('navigation')[0]?.type === 'reload') 
  || (performance.navigation?.type === 1);
// 读取是否为保留状态的跳转
const needKeepState = sessionStorage.getItem('keepDataTableState') === '1';

// 刷新 或 非保留状态跳转（包含<a href>跳转场景）时清除状态
if (isReload || !needKeepState) {
  var table = $('#categoryList').DataTable();
  table.state.clear();
  table.search("").draw(); 
  table.column( '0:visible' ).order( 'asc' ).draw();
  table.page.len(10).draw();
}

// 用完立即删除标记，避免下次打开页面误判
sessionStorage.removeItem('keepDataTableState');