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

来源：互联网发布：程序员入门必看的书籍编辑：程序博客网时间：2024/05/16 19:24

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] view plain copy
 
function checkLocation(){  
        //hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。  
        if(location.hash.indexOf("#win")>-1){  
            $(".window").show();  
        }else{  
            $(".window").hide();  
        }  
}  

[javascript] view plain 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", func, 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内容。

0 0