当前位置:首页 > 技术积累 > 正文内容

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

竹林之风4年前 (2017-12-21)技术积累3415

一、需求

        导航对于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", "A1.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中。

扫描二维码推送至手机访问。

版权声明:本文由久爱编程网发布,如需转载请注明出处。

本文链接:http://www.9icode.com/index.php/post/29.html

标签: JS
分享给朋友:

相关文章

ASP.NET中报“无法在已发送HTTP标头之后进行重定向”异常问题解决

ASP.NET中报“无法在已发送HTTP标头之后进行重定向”异常问题解决

        ASP.NET中报“无法在已发送HTTP标头之后进行重定向”异常时,其中一个原因是:在已经重定向后又重定向。在ASP.NET中实现重定向有以下几...

ASP.NET中报“无法在已发送HTTP标头之后设置状态”异常问题解决

ASP.NET中报“无法在已发送HTTP标头之后设置状态”异常问题解决

        ASP.NET中报“无法在已发送HTTP标头之后设置状态”异常,是因为设置Response的StatusCode之前,程序已设置响应标头。可从以...

ASP.NET网站自定义错误处理及其它安全相关

ASP.NET网站自定义错误处理及其它安全相关

        ASP.NET网站在运行过程中总是有可能报错,例如404等HTTP错误、500等程序异常。在IIS托管并报错的情况下,网站的默认行为依次是:(1).NET运行时接收并处理的部分显示.N...

从被扫描记录看网站安全应该注意的一些细节

从被扫描记录看网站安全应该注意的一些细节

1、尽可能地隐藏服务器真实IP,减少攻击目标。例如使用负载均衡、网关等作为门户,由负载均衡或网关转发到后端服务器。2、服务器必须开放的服务(除HTTP、HTTPS等为公众开放的服务外),尽可能改为其它较大的不常用的端口号,这样攻击者需要扫描...

ASP.NET Core网站报“An assembly specified in the application dependencies manifest was not found”异常解决

ASP.NET Core网站报“An assembly specified in the application dependencies manifest was not found”异常解决

        ASP.NET Core网站报“An assembly specified in the application dependencies ma...

ASP.NET MVC WebApi控制器方法使用async假死超时问题

ASP.NET MVC WebApi控制器方法使用async假死超时问题

        在一个ASP.NET MVC WebApi控制器方法中使用async标记为异步方法后,有时会假死超时。根本原因是同步方法和异步方法混合造成的死锁...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。