js控制手机返回键的兼容性问题

前段时间，公司的项目有一个需求：用户点击购买商品后，进入订单页面，自动生成订单以展示订单详情，然后点击支付前去支付，完了再跳转到首页。那么问题来了，如果用户支付完成 后，点击确定跳转到首页后，点击手机上面的返回键时，会返回到订单页面，又会生成一个未支付的订单，然后用户就可能迷惑或者用户要一直的返回下去才能回到首页，为了防止这种现象的出现，本人在网上看到了一个解决方案：

pushHistory();

	window.addEventListener("popstate", function (e) {
		window.location.reload();
	}, false);

	function pushHistory() {
		var state = {
			title: "title",
			url: "#" 
		};
		window.history.pushState(state, "title", "#");
	}

很开心，在我的手机上果真实现了我想要的功能，然后，开开心心的放到了线上。谁知到了晚上，出事儿了！

用户的果6p，一时首页，就会无限的刷新页面一直进入不到首页中，然后我被叫起来处理问题；在我的手机上什么事儿也没有，在同事的手机上也没问题，心里有一万只神兽奔腾而过，经过查找资料，才知道，原来部分ios版的微信是进入页面时，就会触发prpstate事件，然后就reload，然后再触发，再reload。。。。。。最终，此时真想alert一个“你的手机不能打开我们的公众号”。好吧，发现问题还是得解决的，最后，看到了网上的一个方法：进入页面时，触发事件使reload不起作用，过1秒后，再触发popsatae事件时，再reload。这样可能会使用户在进入页面的前1秒是没法返回的，不过，不影响大观了

所以改过之后的样子是这样的：

 

pushHistory();
     var pageState = false;
     $(window).on('load',function(){
         pageState = true;
     });
	 window.addEventListener("popstate", function (e) {
        if(pageState){
		    window.location.reload();
        }
	 }, false);

	function pushHistory() {
		var state = {
			title: "title",
			url: "#" 
		};
		window.history.pushState(state, "title", "#");
	}

经测试，未发现什么问题，该bug完美解决！

转载于:https://my.oschina.net/u/3527019/blog/2876721