//返回之前没页面则返回首页 function pushHistory() { if (history.length < 2) { var state = { title: "index", url: getHttpPrefix + "index.html" }; window.history.pushState(state, "index", location.href); state = { title: "index", url: "" }; window.history.pushState(state, "index", ""); } //lll("history.state" + history.state) //console.log(history.state) }
判断当前history中的记录个数，由于页面加载的时候，浏览器会自动push进一个记录。所以要判断长度是否小于2.
塞进的state对象是为了获取对应的url链接。
注意点：
第一个pushState我将跳转url放进state对象 方便跳转操作。第二个参数没有实际意义，因为现在的浏览器基本不适用这个参数。
第三个参数是会替换当前地址栏的链接的，但是页面不会发生跳转。（我之前犯了个错误，将第三个参数设置为首页链接，导致了地址栏更改为首页链接，以至于在当前页的链接 都以首页为基础进行跳转，导致页面的所有链接都跳转错误了。）
setTimeout(function () { pushHistory() window.addEventListener("popstate", function (e) { lll("popstate"+window.history.state) if (window.history.state != null && window.history.state.url != "") { location.href = window.history.state.url } }); }, 300);
这段代码放置在页面的ready事件中执行，延迟300毫秒是为了将操作滞后，防止与系统pop事件冲突。
if语句为了判断 history是否存在state对象，因为只有满足我们要求的记录才会有我们添加的state对象 所以 根据这点可以进行页面的跳转操作。
这样就可以实现我们想要的效果。
四、写在最后
缺点：
1. 很明显，就如开头提到的。只适合支持html5的浏览器使用。
2.由于插进了两条记录 ，所以 类似于 微信这种移动端的返回，需要再点击两次返回，才能推出页面，回到微信聊天窗口，用户体验不好。
总结：
这种方法 一定还可以优化和完善，只是目前我的实力不足，还不足以完善到完美的程度。
希望看到这篇文章的朋友可以得到一些启发，或者是有更好的方法实现。
您可能感兴趣的文章: