前端实现返回前一页面

返回按钮的实现使用 history.go(-1)，此方法可返回上一操作但会记录当前页签的所有操作，所以子页签同时操作的情况下就会产生混乱。

例：

当前页签下，若其一子页签A停留在A1页面，另一子页签B连续操作进入各个页面最后停留在B10。此时返回A页面点击返回，当前A页面不会有反应，而子页签B退回到页面B9。这对返回按钮操作来说是存在问题的。

最初问题出现在列表页面与查看页面的切换，进入查看页面有综合查询列表（list）及个人填写列表（myList），所以列表页面可以添加传入参数url区分由哪个页面进入的查看页面，同时 controller 接收传参放入 model，再传入页面上，此时页面就可直接设置返回按钮的 href 达到固定返回按钮跳转 url 的目的。

进一步思考，能否减少修改范围，或只修改页面就能解决这个问题，查询到 js 方法 document.referrer 可返回载入当前文档的文档的 URL。于是页面初始加载 ready 中修改返回按钮的 href 即可达到目的。

$("#btnBack").attr("href", document.referrer);

进一步优化在返回按钮中使用 js 方法，直接使用<input>标签执行 js 方法更加方便，结果如下

<input class="btn" type="button" value="返回" οnclick="location.href=document.referrer" />

实际使用中再次发现问题，document.referrer返回无参数，即原查询列表的查询结果，再点击返回后就失去了查询结果最后又回到了修改 history.go(-1) 方法。进入页面时，记录当前历史记录长度，即 historyNum = history.length，通过计算就可得知应退回多少步，即结果

<input class="btn" type="button" value="返回" οnclick="history.go(historyNum-history.length-1)" />

前端实现返回前一页面相关推荐

AngularJs返回前一页面时刷新一次前面页面
要求: 页面A进入到页面B,在页面B处理完后返回页面A,页面A里的数据应该动态的减去一条,但由于一般情况下页面是缓存起来的,返回A后读取的是缓存静态页面,里面显示的数据不会减少.应客户要求,需要重新加 ...
js中实现页面跳转（返回前一页、后一页）
一:JS 重载页面,本地刷新,返回上一页代码如下: <a href="javascript:history.go(-1)">返回上一页</a> < ...
java跳转页面后再跳回前一个页面_js中实现页面跳转（返回前一页、后一页）
一:JS 重载页面,本地刷新,返回上一页代码如下: 返回上一页重载页面,本地刷新返回上一页重载页面,本地刷新返回前二页并刷新的JS代码应该怎样写. 代码如下: history.go(-2); ...
JS返回前一页（或关闭本页面，返回首页）
navigator.userAgent在判断浏览器版本时,需要自己核对下,不同的浏览器返回的window.history.length值也不同,需要特殊情况特殊处理,但核心逻辑就是如此,先判断浏览器版 ...
php执行成功后返回前一页并刷新页面
这个问题是群里有人问的. 他有一个退出的页面logout.php,希望用户在点击退出按钮后退出登录状态,并返回之前的页面. 他写的代码如下: <?php echo "<scrip ...
前端性能优化：当页面渲染遇上边缘计算
简介: 当前几种常见的前端性能优化方案仍然不可避免地会存在一些缺点.本文在 ESI (Edge Side Include) 的基础上,提出了一种新的优化思路:边缘流式渲染方案(ESR),即借助 CDN ...
Vue：前端体系与前后端分离
Vue:前端体系与前后端分离概述介绍 Vue(读音/viu/,类似于 view)是一套用于构建用户界面的渐进式框架,发布干 2014 年 2 月. 与其它大型框架不同的是,Vue 被设计为可以 ...
Vue：前端体系、前后端分离
1.概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue的核心库只关注视图层 ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...

前端实现返回前一页面

前端实现返回前一页面相关推荐

最新文章

热门文章