天天看点

返回上一页跳过中间页面,返回上一页跳过敏感页面

常见一种情况,例如支付:

有如下三个页面:入口页面,填写金额页面,支付成功页面

其中支付页面在支付成功有会有一个返回上一页的按钮,点击就返回上一页,或者点击浏览器返回上一页会出现继续进入输入金额的页面。

现在解决这个问题

关键点:

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都可以删除当前页面的历史记录替换成指定的