JS学习笔记 location.href和location.replace的大致区别

今天学校的外聘老师告诉我们,公司开发过程中,因为新手的一些误操作造成了许多问题,

举个例子,在项目中 比如要购买一件商品 ,并且有一个这个商品的优惠券,而使用这张优惠券需要取请求 一个第三方的地址,

中间会有一次跳转,因为使用了location.href   后,按流程操作是没问题的,但是如果用户点击返回,则无法跳回原本的提交订单的页面,会一直进行重复请求,造成程序出错,

所以,必须替换成location.replace 来跳转,保证在进入第三方后 不会存入window.history 用户点击返回就可以绕过第三方地址,直接返回最初的页面。

还提到了,在ios的设备上当用户点击返回时,为了提高性能网页呈现的是快照形式,并不会更新内容,所以,在返回网页时需要用到localtion.reload() 来刷新页面 ,重新请求页面内容

<body οnpageshοw="location.reload()">

用法区别

location.href="http://www.baidu.com"

location.replace("http://www.baidu.com")


location.href 会写入 浏览器的历史  window.history 对象中  location.replace则不会


实践


这里我写了两个按钮,都是跳转到百度网站


先点击href

发现 跳转后 浏览器的返回键时可以点击的



再点击replace

跳转后 浏览器的返回键是无法点击的,因为,replace其实是将当前的url替换了,而非跳转,并不会保存记录



关于这点区别,先记录一下

溜了溜了

  • 16
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值