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(),这两者的行为是相同的。
相关推荐
灵感__idea11 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴1 小时前
Mix
前端·webgl
代码续发1 小时前
前端组件梳理
前端
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
YuTaoShao2 小时前
【LeetCode 热题 100】131. 分割回文串——回溯
java·算法·leetcode·深度优先
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
源码_V_saaskw3 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
超浪的晨3 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发