单页面应用下的比如angular做聚合支付时候拦截后退的坑

发布时间：2020-12-17 09:22:33 所属栏目：安全来源：网络整理

导读：1.因为是支付所以url要验证合法性。简单的push一个#作为url会报错。 2.必须push进去他原来的合法的url. 知识点： 1、onpopstate 事件，点击后退按钮(或者在 JavaScript 中调用 history.back() 方法)时触发； 2、hash 属性：可对URL 的锚部分（从 # 号开始

1.因为是支付所以url要验证合法性。简单的push一个#作为url会报错。

2.必须push进去他原来的合法的url.

知识点：

1、onpopstate事件，点击后退按钮(或者在JavaScript中调用history.back()方法)时触发；

2、hash 属性：可对URL的锚部分（从 # 号开始的部分）进行操作（可读可写）；

关于hash的链接点击打开链接

需求：

微信页面，在当前页面点击某处时，弹出一个覆盖整个手机屏幕的层，弹出这个层以后，点击微信屏幕的返回按钮时，隐藏弹出层，而不退出当前页面！

解决方案：

在点击事件发生的时候利用hash属性给URL加上锚点，展示弹出层，而点击返回按钮后，去掉URL锚点，隐藏弹出层；点击返回按钮将触发onpopstate事件；为什么要给URL加锚点？需求描述的所有操作都在同一个页面上，所以如果不在URL上添加锚点，点击展示弹出层后，用户点击微信返回按钮，将退出当前页面！

[html] 
   view plain 
   copy 
   
 $(".btn").click(function(){
 location.hash="win";//给url加上锚点，此锚点会自动加载到url的
 $(".window").show();
 $("#search").focus();
 });

checkLocation方法检测URL上是否有锚点win，有锚点则展示弹出层，反之，则隐藏弹出层

[javascript] 
   copy

functioncheckLocation(){

//hash属性是一个可读可写的字符串，该字符串是URL的锚部分（从#号开始的部分）。
if(location.hash.indexOf("#win")>-1){
$(".window").show();
}else{
$(".window").hide();
}
}

copy 
    
   
//popstate事件在浏览器操作时触发,比如点击后退按钮(或者在JavaScript中调用history.back()方法). window.onpopstate=function(){
 checkLocation();
 };

总结一把：关于返回的事件拦截。 window.onpopstate=fn.用来处理页面跳转的逻辑。

1.history.pushState()这个api的 url,虽不会触发页面下载，但是在特殊情况下会被第三方校验url合法性。

2.通过#hash，添加事件。锚点事件。

3.在兼容性方面，支付宝的安卓版本会有不同情况，急，需要返回两次才可以触发，window.onpopstate事件。那么在用户点击以外的处理方法就是 history.go(-1),在代码里的相对应控制语句里加上这一个即可。

location.hash.背景知识。window.addEventListener("hashchange",func,false);

改变#不触发网页重载

单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。

比如，从

　　http://www.example.com/index.html#location1

改成

　　http://www.example.com/index.html#location2

浏览器不会重新向服务器请求index.html。

五、改变#会改变浏览器的访问历史

每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。

这对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。

值得注意的是，上述规则对IE 6和IE 7不成立，它们不会因为#的改变而增加历史记录。

六、window.location.hash读取#值

window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。

七、onhashchange事件

这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。

它的使用方法有三种：

　　window.onhashchange = func;

　　<body onhashchange="func();">

　　window.addEventListener("hashchange",false);

对于不支持onhashchange的浏览器，可以用setInterval监控location.hash的变化。

八、Google抓取#的机制

默认情况下，Google的网络蜘蛛忽视URL的#部分。

但是，Google还规定，如果你希望Ajax生成的内容被浏览引擎读取，那么URL中可以使用"#!"，Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。

比如，Google发现新版twitter的URL如下：

　　http://twitter.com/#!/username

就会自动抓取另一个URL：

　　http://twitter.com/?_escaped_fragment_=/username

通过这种机制，Google就可以索引动态的Ajax内容。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!