返回按钮——没有上一页的URL时,跳转到首页(document.referrer的妙用)

简介: 返回按钮——没有上一页的URL时,跳转到首页(document.referrer的妙用)

以下情况会导致页面没有上一页的URL:

  • 直接在浏览器地址栏中输入地址;
  • 使用location.reload()刷新(location.href或者location.replace()刷新有信息);
  • 在微信对话框中,点击链接进入微信自身的浏览器;
  • 扫码进入QQ或者微信的浏览器;
  • 从https的网站直接进入一个http协议的网站
  • a标签设置rel="noreferrer"
  • meta标签来控制不让浏览器发送referer
<meta content="never" name="referrer">

没有上一页时,返回按钮再怎么点击都没有任何反应,用户体验极差

优化建议:如果发现浏览器没有上一页,就把返回按钮的链接改成首页的链接地址

完整范例代码

核心要点:document.referrer 获取前一个访问页面的URL地址

<template>
    <div>
        <a href="javascript:history.go(-1)" class="backLink">返回</a>
    </div>
</template>
<script>
    export default {
        mounted() {
            if (document.referrer === '') {
                let backLink = document.getElementsByClassName("backLink");
                // 没有来源页面信息的时候,改成首页URL地址
                backLink.attr('href', '/');
            }
        },
    }
</script>


目录
相关文章
|
7月前
|
移动开发
钉钉H5微应用配置IP,应用首页地址报错:app url exceeds max length limit,这个怎么处理?
钉钉H5微应用配置IP,应用首页地址报错:app url exceeds max length limit,这个怎么处理?
658 0
|
7月前
|
前端开发 JavaScript
前端知识(十)———JavaScript 使用URL跳转传递数组对象数据类型的方法
前端知识(十)———JavaScript 使用URL跳转传递数组对象数据类型的方法
146 0
|
小程序 前端开发 PHP
PHP实现生成小程序二维码带参数进入指定页面、小程序URL scheme实现携带数据跳转小程序
PHP实现生成小程序二维码带参数进入指定页面、小程序URL scheme实现携带数据跳转小程序
240 0
|
3月前
|
安全 PHP 开发者
Web安全-URL跳转与钓鱼
Web安全-URL跳转与钓鱼
65 8
|
6月前
|
应用服务中间件 nginx Windows
nginx实现网站url带参跳转 POST请求GET请求跳转
nginx实现网站url带参跳转 POST请求GET请求跳转
333 1
|
JavaScript
jQuery带参跳转新页面,新页面获取url多个参数的办法
jQuery带参跳转新页面,新页面获取url多个参数的办法
51 0
|
JavaScript
jQuery带参数跳转,新页面获取url的参数id
jQuery带参数跳转,新页面获取url的参数id
59 0
|
移动开发
过滤器实现手机跳转指定前缀url
过滤器实现手机跳转指定前缀url
53 0
thymeleaf获取url地址跳转时所带参数
thymeleaf获取url地址跳转时所带参数
363 0
|
安全 前端开发 网络安全
网站漏洞检测服务对URL跳转漏洞检测分析
网站渗透测试是指在没有获得网站源代码以及服务器的情况下,模拟入侵者的攻击手法对网站进行漏洞检测,以及渗透测试,可以很好的对网站安全进行全面的安全检测,把安全做到最大化。在挖掘网站漏洞的时候我们发现很多网站存在域名跳转的情况,下面我们来详细的讲解一下。
392 0
网站漏洞检测服务对URL跳转漏洞检测分析