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

一、需求

        导航对于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中。

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值