诡异的返回上一页

java基础 专栏收录该内容
55 篇文章 0 订阅

前言

日常开发中,代码规范真的很重要。对于后台代码现在有很多的代码检测工具帮我忙检测代码问题。例如jenkins,阿里代码检测工具等等,但是还是有很多小伙伴忽视了代码的规范性,比如说js脚本的规范。有些小伙伴们用js脚本实现了自己的功能,就觉得自己的任务完成了,万事大吉了,往往这漫不经心的心态导致了后来的漫漫填坑路。今天我就遇到一个小问题,困惑了很久,后来终于解决了,问题是解决了,但是教训还是要记住的。

问题描述

是这样,在项目的一个列表页面中,下面有一个分页组件,页面上方还有一个返回上一页的超链接标签。现在想要达到的效果是,如果点击分页中的下一页,连续点击几次后,再去点击页面上的返回超链接去返回到上一个分页页面(有些小伙伴可能说,分页组件中不是都是上一页标签么,完全没必要再搞一个返回超链接啊,显得很多余,这里有其他因素,大家不用纠结在这里)。总之要实现上面的功能就是了,我们的重点是接下来的要说明的。
返回上一页,我们一般都是会用window.historty.back()或者window.history.go(-1)去实现。这两者的实现原理都是通过浏览器缓存去缓存浏览历史。点击返回时,从缓存中去返回上一页面。但是我的列表页面中,当我第一次点击返回上一页的时候,页面并没有返回到上一页面而是当前页向上抖动(或者说是提了一下)。第二次点击返回链接的时候才返回到上一页。上面也说到window.historty.back()返回上一页是通过浏览器缓存的,所以后台中方法是没有执行的,只能在页面上调试。可以看到两次点击返回上一页,浏览器上的地址是差不多一样的,注意这里说的是差不多一样,说明还是有差别的。区别如下
这里写图片描述
还有下面的,下面链接的时候,页面会向上抖动(或者说提一下)。
这里写图片描述
页面上控制台上没有错误信息,而且在火狐浏览器上是没有这种问题的,但是在谷歌和IE11上就会出现第一次返回无效,第二次才有效果的。这种现象当时把我带上歪路了,我以为是浏览器兼容性问题,于是在网上一番百度,结果还是没有解决。

柳暗花明

后来实在没办法,我请教了几个同事,其中小强同学还是很给力的,他说你在页面中去打印history.length的值,然后点击分页组件中的下一页,每次点击下一页的时候去看看history.length的值,结果每次点击下一页的时候history.length的值就增加2。这显然是不对的,history.length记录的是浏览器的浏览历史条数。我点击下一页的时候,他应该只会加1才对。看样子是这个分页有问题啊,于是我查看了分页的页面代码,发现下一页按钮是一个<a href="#" onclick="toNextPage()"></a>。相信看到这里有些小伙伴已经知道上面的所说的诡异问题的原因了。
我们都知道,如果一个a标签中同时有href属性和onlick事件,点击这个a标签的时候会先去触发onclick事件,然后再去执行href上的链接。所以上面点击下一页的时候相当于跳转了两次页面,看起来是只有一个页面,实际上是两个页面。所以再用window.history.back()返回的时候,第一次看起来没有效果,第二次才真正的返回上一页。而且页面的上提抖动现象就是因为在链接后面加上的这个”#”。实际上 #包含了一个位置信息默认的锚是#top 也就是网页的上端 ,所以我们只需要把上面的href=”#”,写规范一点写成href=”javascript:void(0);”或者去掉href属性(这里不提倡)。甚至直接用button按钮来代替上面的a标签。

拓展

上面说到了window.history.back()是通过浏览器缓存去返回上一页的,那也就意味着这时候返回上一页,页面数据是没有刷新的(当然如果缓存已经过期,他会提示你文档已过期,让你再次加载页面)。那么如果我们想要再返回上一页的同时,刷新上一页的页面数据这时候又该如何实现呢。有些小伙伴可能会想这不是很简单么,直接把上一页的请求地址配上去,不就行了么。这种方法对于上一页是固定页面的时候当然是可以的,但是如果是有多个页面可以进入到当前页面,那你在返回上一页链接上配置哪个页面的请求地址。其实我们可以利用这种方式来实现

window.location.href = document.referrer;  

总结

代码规范不是小问题,有人挖坑,有人填!但是还是少挖点坑吧!坑坑相报何时了?

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

爱琴孩

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值