实现网页原路返回:从哪个页面跳转过来就返回哪个页面
一、需求
导航对于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中。