JavaScript處理頁面跳轉與返回的路徑問題

今天思考了一個問題：如何判斷頁面是不是從特定頁面「跳」過來的？
由於我作的一個項目中有一個（二級）頁面要返回主頁面。

圖中這句話在必定程度上豈不是增長了用戶的「疑惑」？

如果「返回」，直接history.go(-1); 或 history.back(); 便可。

但如果用戶直接來到這個（二級）頁面呢？怎麼去主頁面？或者說，它又「返回」到哪去？
這就是筆者寫這篇博客的緣由。

---

在同源條件下，能夠在特定頁面裏存儲一個sessionStorage ，

window.function(){ 
 
   
	sessionStorage.setItem('key','mxc');
}

而後在其餘頁面開始加載的時候去獲取這個sessionStorage。若能獲取到，則代表它是從特定頁面跳轉來的，並馬上刪掉這個sessionStorage，以便下次判斷：

window.function(){ 
 
   
	if(sessionStorage.getItem('key')!==null){ 
 
   
		sessionStorage.removeItem('key');
		history.back();
	}else{ 
 
   
		window.location.href="/路徑（URI中「帶層次的文件路徑」那部分）/";
	}
}

---

還可使用 document.referrer —— js中獲取「前一頁面URL地址」的方法。

如果從地址輸入框輸入連接方式打開的頁面，其document.referrer爲""。

因此，咱們能夠這麼作：

function ClickBack(){ 
 
   
	if(!document.referrer || document.referrer.indexOf("你要返回的路徑")===-1){ 
 
   
		window.location.href="/路徑（URI部分）/";
	}else{ 
 
   
		history.back();
	}
}

這徹底能夠用在以下業務需求裏：

1. 複製連接或者QQ中在瀏覽器中新打開的連接，點擊「返回」跳轉到列表頁；
2. 從列表頁連接調整進的店「返回」執行瀏覽器的「返回」動做，好處是能直接定位到列表頁上次瀏覽的位置。

---

注意，下面的場景沒法得到 referrer 信息 ：

• 直接在瀏覽器中輸入地址
• 使用location.reload()刷新（location.href或者location.replace()刷新信息）
• 在微信對話框中，點擊進入微信自身瀏覽器
• 掃碼進入微信或QQ的瀏覽器
• 直接新窗口打開一個頁面
• 從https的網站直接進入一個http協議的網站（能夠避免：<meta name="referrer" content="always">）
• a標籤設置rel=「noreferrer」（兼容IE7+）
• meta標籤來控制不讓瀏覽器發送referer：<meta name="referrer" content="never">
• 點擊 flash 內部連接
• Chrome4.0如下，IE 5.5+如下返回空的字符串
• 跨域

本文同步分享在 博客「行舟客」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。