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

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

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

一、需求

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


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

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

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

标签: JS
分享给朋友:

相关文章

Android开发从新手开始(一)——概述

Android开发从新手开始(一)——概述

前言        做为一个程序员,不应该将自己限定在自己熟悉的平台和语言上,而也应该多去了解一下其它平台和语言。这样可以吸取各个平台和语言的思想,提升自己解决...

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 MVC WebApi控制器方法使用async假死超时问题

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

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

发表评论

访客

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