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

一、需求

        导航对于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;//未匹配到则返回默认返回URL
    var 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中。