实现网页原路返回：从哪个页面跳转过来就返回哪个页面

一、需求

导航对于PC网站或WAP网站有着相当重要的作用，它有利于提升用户体验，不至于让用户迷路。而“返回”就是导航的功能之一，主要体现在WAP网页左上角的“返回”按钮或链接。这里“返回”是指原路返回，即从哪个页面跳转过来就返回哪个页面。或许你会想，浏览器不是有返回按钮吗？JS不是提供了history.go(-1)或history.back(-1)来实现这个功能吗？对于简单情况这是有用的，但是有两种情况或许不太适用：

（1）浏览器返回按钮和history对象提供的方法，虽然都可以返回上一页，但是返回的页面是缓存而不是最新的，尽管你可以使用其它JS方法或者设置来实现打开最新页面，但毕竟可能涉及页面过多并没有很好的可维护性。那么你可能会说，为什么一定要是最新页面呢？比如从一个数据页面跳转到另一个数据页面，现在我需要返回上一个数据页面查看最新数据呢？

（2）浏览器返回按钮和history对象提供的方法，可能造成无限循环。如：初始在A页面，点击链接进入B页面，然后再点击链接进入A页面，此时在A页面点击“返回”回到B页面，而在B页面点击“返回”又回到A页面，如此循环；又如：初始在A页面，点击链接进入B页面（因B页面需要登录故自动跳转到登录页），此时在登录页点击“返回”将先跳转到B页面又跳回登录页，如此反复。

二、方案

要实现该功能，我们可以先配置每个页面可能的来源页面列表，并在跳转后根据来源页面去匹配关联配置，如果存在则跳转回此来源页面，否则跳回默认页面或停留在当前页面。

（1）服务端实现：将配置保存在内存或持久存储，服务端程序获取当前页面URL和来源页面URL，通过比对判断设置“返回”链接的href；

（2）浏览器端实现：将配置保存在内存、Cookie或localStorage中，JS获取当前页面URL和来源页面URL，通过比对判断设置“返回”链接的href。

无论服务端实现还是浏览器端实现，核心思路都是配置页面关联，比对当前页面来源页面与关联配置，设置“返回”链接的href，不同之处就是配置存储在服务端还是浏览器端，本文以浏览器端为例。

三、实现

1、首先是页面关联配置，键名为当前页面过滤协议、域名和端口后的相对路径，键值为可能的来源页面相对路径的字符串数组，如：A.html页面可能从A1.html或A2.html页面跳转过来。

var config = {urlPrefix : location.origin + '/',//URL前缀，包含协议、域名、端口等，用于过滤pageLinkList : {"A.html": ["A1.html", "A2.html"],"B.html": ["B1.html", "B2.html"]}
};

2、页面加载完成后调用该方法获取返回URL并设置“返回”链接的href。

//defaultBackUrl：未找到匹配时的默认返回相对路径
var getBackUrl = function(defaultBackUrl) {var sIndex = location.href.indexOf(config.urlPrefix) + config.urlPrefix.length;//获取当前页面相对路径的起始索引var eIndex = location.href.indexOf('?');//获取当前页面相对路径的截止索引var page = (eIndex < 0 ? location.href.substring(sIndex) : location.href.substring(sIndex, eIndex)).toLowerCase();//获取当前页面相对路径if (null == config.pageLinkList[page]) return defaultBackUrl;//未匹配到则返回默认返回URLvar referrer = document.referrer;for (var index = 0; index < config.pageLinkList[page].length; index++) {if (referrer.toLowerCase().indexOf(config.urlPrefix + config.pageLinkList[page][index]) >= 0) {return referrer;}});return defaultBackUrl;
}

3、对于登录页，可以传递来源页面的来源URL用于返回，传递来源页面用于登录成功后自动跳转。若不想在URL中传递，当然也可将这两个URL（即登录页的最近信息）存入在localStorage或Cookie中。

实现网页原路返回：从哪个页面跳转过来就返回哪个页面相关推荐

js 页面跳转方法当前页与新增页面
js 页面跳转方法 open('http://www.baidu.com'); //页面跳转打开一个新的页面close() //关闭当前页面location.href //可以进行页面跳转当前网页直接 ...
从一个jsp页面跳转到另一个jsp页面时的参数传递
1.从一个jsp页面跳转到另一个jsp页面时的参数传递 (1)使用request对象获取客户端提交的信息 login.jsp页面代码如下: [java] view plaincopy <%@ ...
Vue | 实现页面跳转刷新，在Vue页面中调用其他页面的方法
最近有一个登录界面的需求,感觉很简单,尝试各种方法每次都感觉快要成功了,但还是没能解决问题,果然没有系统学习就是很难立刻找到突破点,难以一语中的,好在历经千帆,在页面调用中就解决了这个问题. 需求描述 ...
easyUI分页中，如何实现页面跳转，再返回时，仍然到跳转前页数。（含页面显示条数）
easyUI中,分页情况下,跳转到其他页面修改数据,再返回时,相当于重新打开此页面,即显示第一页. 这样很不方便.故提出跳转回修改前的页面的需求. 通过网上搜索,了解到实现页面跳转回去的基本原理是:传 ...
javascript传值和页面跳转传值（ASP.NET页面传参的三种方法）
我在csdn上提的问题是我现在希望从asp.net网页弹出对话框,弹出一些错误信息.警告.提示信息之类的东西,目前准备用javascript实现,所以我希望在调这个对话框的时候,动态传 ...
mysql 页面跳转_Springboot+MyBatis+mysql+jsp页面跳转详细示例
SpringBoot与MyBatis搭建环境,底层数据库为mysql,页面使用JSP(官网上不推荐使用jsp),完成从数据库中查询出数据,在jsp页面中显示,并且实现页面的跳转功能. 项目下载链接: ...
js关闭一个html页面跳转,js如何关闭当前页面
同样网上找了很多方法,都不行. 然后我再认真理解一下浏览器提示的信息: 不能关闭非当前窗口打开的页面. 网上找到的方法: window.opener = null; window.open(" ...
php页面跳转的方法,PHP实现页面跳转的四种方法
PHP实现页面跳转的四种方法发布时间:2020-05-20 11:36:01 来源:亿速云阅读:172 作者:Leah 今天小编就为大家分享PHP实现页面跳转的四种方法.小编觉得挺实用的,为此分享 ...
【小程序“600002“】现象:小程序测试版能正常的进行页面跳转,正式版不能进行页面跳转
记录:(in promise) MiniProgramError {"errno":600002,"errMsg":"request:fail url ...

实现网页原路返回：从哪个页面跳转过来就返回哪个页面

实现网页原路返回：从哪个页面跳转过来就返回哪个页面相关推荐

最新文章

热门文章