返回按钮——没有上一页的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>


目录
相关文章
|
4月前
|
移动开发
钉钉H5微应用配置IP,应用首页地址报错:app url exceeds max length limit,这个怎么处理?
钉钉H5微应用配置IP,应用首页地址报错:app url exceeds max length limit,这个怎么处理?
546 0
|
4月前
|
前端开发 JavaScript
前端知识(十)———JavaScript 使用URL跳转传递数组对象数据类型的方法
前端知识(十)———JavaScript 使用URL跳转传递数组对象数据类型的方法
93 0
|
11月前
|
小程序 前端开发 PHP
PHP实现生成小程序二维码带参数进入指定页面、小程序URL scheme实现携带数据跳转小程序
PHP实现生成小程序二维码带参数进入指定页面、小程序URL scheme实现携带数据跳转小程序
192 0
|
7天前
|
安全 PHP 开发者
Web安全-URL跳转与钓鱼
Web安全-URL跳转与钓鱼
19 8
|
3月前
|
应用服务中间件 nginx Windows
nginx实现网站url带参跳转 POST请求GET请求跳转
nginx实现网站url带参跳转 POST请求GET请求跳转
140 1
|
10月前
|
JavaScript
jQuery带参跳转新页面,新页面获取url多个参数的办法
jQuery带参跳转新页面,新页面获取url多个参数的办法
39 0
|
10月前
|
JavaScript
jQuery带参数跳转,新页面获取url的参数id
jQuery带参数跳转,新页面获取url的参数id
46 0
|
10月前
|
移动开发
过滤器实现手机跳转指定前缀url
过滤器实现手机跳转指定前缀url
38 0
|
10月前
thymeleaf获取url地址跳转时所带参数
thymeleaf获取url地址跳转时所带参数
296 0
|
JavaScript
JS获取url参数:如果不存在参数,自动跳转到指定页面
JS获取url参数:如果不存在参数,自动跳转到指定页面
84 0