JavaScript用来改变浏览器地址栏 URL 的方法

window.location.replace(), window.location.href, 和 window.location.assign() 都是 JavaScript 用来改变浏览器地址栏 URL 并跳转到新页面的方式,但它们在 历史记录 处理上有一些不同。下面是它们的区别:

window.location.replace()

作用:
  • 用于加载一个新的 URL 替代当前页面。
  • 不会将当前页面添加到浏览器的历史记录中
何时使用:
  • 当你想要跳转到新页面,但不希望用户能够通过浏览器的"后退"按钮返回到当前页面时。
  • 比如,用户登录后,你可能不希望他们能通过点击"后退"按钮回到登录页。
示例:
javascript 复制代码
window.location.replace("https://www.example.com");
结果:
  • 用户跳转到 https://www.example.com
  • 如果用户点击"后退"按钮,不会返回到当前页面,因为当前页面没有保留在历史记录中。

window.location.href

作用:
  • 用于改变浏览器的 URL,跳转到新的页面。
  • 会将当前页面添加到浏览器的历史记录中
何时使用:
  • 当你希望跳转到新页面,并且用户仍然可以通过"后退"按钮返回到当前页面时。
示例:
javascript 复制代码
window.location.href = "https://www.example.com";
结果:
  • 用户跳转到 https://www.example.com
  • 如果用户点击"后退"按钮,会返回到当前页面,因为当前页面被保留在浏览器历史记录中。

window.location.assign()

作用:
  • 功能和 window.location.href 类似,用于加载新的 URL。
  • 会将当前页面添加到浏览器的历史记录中 ,与 href 相同。
何时使用:
  • 当你希望跳转到新页面,并且用户仍然能够通过"后退"按钮返回到当前页面时。它可以像 href 一样用来设置新的 URL。
示例:
javascript 复制代码
window.location.assign("https://www.example.com");
结果:
  • 用户跳转到 https://www.example.com
  • 如果用户点击"后退"按钮,会返回到当前页面,因为当前页面被保留在历史记录中。

总结区别

方法 历史记录行为 使用场景
window.location.replace() 不会将当前页面添加到历史记录中 不希望用户通过"后退"按钮返回当前页面
window.location.href 会将当前页面添加到历史记录中 希望用户能够通过"后退"按钮返回当前页面
window.location.assign() 会将当前页面添加到历史记录中 希望用户能够通过"后退"按钮返回当前页面

总结

  • 如果你需要避免页面跳转后用户能回到当前页面,使用 window.location.replace()
  • 如果你希望用户能够通过"后退"按钮返回到当前页面,则使用 window.location.hrefwindow.location.assign(),这两者的行为是相同的。
相关推荐
mghio30 分钟前
Dubbo 中的集群容错
java·微服务·dubbo
范文杰2 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪2 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy3 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试