前端跳转失败,例如返回按钮,js跳转失败的踩坑原因之一

本人最新博客地址blog

问题描述：

今天在做项目的一些小细节的完善,具体是这样的：

上面蓝色的按钮是用来返回至上一个页面并刷新使用的，然后js的代码是

<div class="" style="display: inline-block"><button class="layui-btn layui-btn-normal layui-btn-sm" onclick="self.location=document.referrer;"><i class="layui-icon">&#xe603;</i></button></div>
//核心代码是
onclick="self.location=document.referrer;"

这是取了document中的地址
但是却不起作用
主要表现在,无法返回至上一个页面,而且并刷新了当前的页面(因为我在后端查看日志,调用加载该页面的接口)

---

原因分析：

一开始真的是百思不得其解,以为是js代码的错误,所以尝试了其他各种各样得返回代码,就连 window.history.back();
也完全不起作用,不过也一般不推荐这个代码,以为他只是调用了浏览器中的缓存 , 并不会进行刷新的作用

---

解决方案：

最后我也是在偶然之间,发现了这个onclick 被包裹在了 一个form表单中 :

去掉form表单就可以了,好像onclick事件的页面跳转是不能被包裹在form之中的,就类似于 :

这样一个操作,所以默认又把当前页面刷新了…
踩坑持续