js控制浏览器前进、后退、页面跳转详细方法和示例

// 跳转到指定URL（会在浏览器历史记录中添加新条目）
window.location.href = 'https://www.example.com';

// 等同于：
window.location = 'https://www.example.com';

// 跳转到指定URL（不会添加历史记录，无法后退）
window.location.replace('https://www.example.com');

// 在新标签页打开URL
window.open('https://www.example.com', '_blank');

// 在当前页打开（等同href）
window.open('https://www.example.com', '_self');

// 后退一步（等同浏览器后退按钮）
window.history.back();

// 前进一步（等同浏览器前进按钮）
window.history.forward();

// 后退两步
window.history.go(-2);

// 前进三步
window.history.go(3);

// 刷新当前页（等同F5）
window.history.go(0);

// 添加历史记录（不触发页面跳转）
window.history.pushState({page: 1}, 'Title 1', '/page1');

// 替换当前历史记录
window.history.replaceState({page: 2}, 'Title 2', '/page2');

// 监听前进/后退（配合pushState使用）
window.addEventListener('popstate', (event) => {
  console.log('当前状态:', event.state);
});

// 监听hash变化
window.addEventListener('hashchange', () => {
  console.log('Hash变为:', window.location.hash);
});

// 添加历史记录并跳转（无刷新）
document.getElementById('btn').addEventListener('click', () => {
  const state = { userId: 123 };
  window.history.pushState(state, '', '/profile');

  // 动态更新页面内容（模拟SPA）
  document.body.innerHTML = `<h1>用户 ${state.userId} 的主页</h1>`;
});

// 处理后退按钮
window.addEventListener('popstate', (event) => {
  if (event.state) {
    document.body.innerHTML = `<h1>用户 ${event.state.userId} 的主页</h1>`;
  }
});