控制浏览器回退按钮的关键对象history

昨天在工作中碰上一个问题,具体是页面跳转问题:因为第A页面是设置了需要post跳转,当用户从A页面跳转到B页面后,用户再从B页面的左上角返回按钮返回时候就报错了。这是因为点击左上角的返回按钮,系统是从浏览器的history对象里取当前页的上一条url记录,并跳转。但是上一条url对应的页面由于程序控制只可post跳转,所以报错了。

刚开始我是想禁用掉返回按钮,但是没有找到怎么禁用浏览器的返回按钮(微信公众号下)。

后来在csdn的一条博客里找到了其他方法, 就是通过监听返回事件,当事件触发时候设置跳转页面,即将跳转页面设置跳转到别处。

在此前提是需要通过 window.history.pushState()方法新增当前页面,不然不会触发监听事件下的跳转动作;

代码如下:

 1      $(function() {
 2             //监听微信返回事件,重定向url
 3             pushHistory();      
 4             window.addEventListener("popstate", function (e) {                 
 5                     console.log('我监听到了浏览器的返回按钮事件啦');
 6                     window.location.href = '@Url.TenantAction("Index", "Store")';
 7              
 8             }, false);
 9           
10             function pushHistory() {
11                 var state = {
12                     title: "订单详情",
13                     url: "#"
14                 };
15                 window.history.pushState(state, "订单详情", "#");
16             }
17          
18         });

 

posted @ 2016-10-09 15:40  长沙大鹏  阅读(354)  评论(0)    收藏  举报