天天看點

傳回上一頁跳過中間頁面,傳回上一頁跳過敏感頁面

常見一種情況,例如支付:

有如下三個頁面:入口頁面,填寫金額頁面,支付成功頁面

其中支付頁面在支付成功有會有一個傳回上一頁的按鈕,點選就傳回上一頁,或者點選浏覽器傳回上一頁會出現繼續進入輸入金額的頁面。

現在解決這個問題

關鍵點:

history.replaceState(null, null, document.referrer);

document.referrer(改屬性非常的脆弱,參考:http://driftcloudy.iteye.com/blog/986265)

location.replace

方案1:

添加中間空白頁面:

agency.html,輸入金額頁面跳轉和支付成功跳轉,都是跳轉到這個頁面。

if(/order\.html/.test( document.referrer)){
        		window.location.href = window.ptDomain + "person/welfare";
        }
        else{
        	history.back();
        }
           

切記跳轉代理頁面的時候不要用location.relace("xx/agency.html");

這樣處理的話會把來源頁面的曆史記錄替換成代理頁面,這樣就無法判斷來源了

輸入金額頁面:

替換目前頁面的曆史記錄為代理頁面:

location.replace("./agency.html");
           

支付成功的頁面直接:

location.history.back()
           

方案2,不需要中間件:

a.html

<p>我是aaaaaaaaaaaaaaaaaaa</p>
    <a href="./b.html" target="_blank" rel="external nofollow" >去bbbbbbbbb</a>
           

b.html

<p>我是b</p>
	<a href="c.html" target="_blank" rel="external nofollow" > 去ccccccccc</a>
	<script>
		history.replaceState(null, null, document.referrer);
		console.log("後:",window.history)
	</script>
           

C.html

<body>
	<div id="wrap"></div>
	<p οnclick="javascript:deleB()">我是c.html,點選跳過b</p>
<script>
		function deleB(){
			
			history.back();
		}
		console.log(document.referrer)
	</script>
</body>
           

注意:

如果涉及跨域,必須使用代理的方式,history.replaceState不支援不同域名,location.replace沒有跨域問題,history.replaceState和location.replace都可以删除目前頁面的曆史記錄替換成指定的