七月

男儿到死心如铁。看试手,补天裂

欢迎来到我的博客~


html5 pushState使用

前些天接了一个需求。 商家落地页, 一个单纯的H5网页。里面的所有”页面跳转”都是用的显示隐藏实现的。 现在产品需求是,用户在【我的相册/产品详情/关于我们】这些页面点击硬键返回,需要返回到上一页,而不是直接退出当前web也页面。

第一个想到是实现是 相册页/详情页..这些跳转页面单独做成一个页面,这样造成的影响就是文件会很混乱【因为会有十几个落地页模板。以后可能还会有更多】,所以被排除了。

然后就想到通过html5的pushState实现。

pushState的概念就是在浏览器的history对象中添加一个地址【不执行刷新】,返回的时候,通过URL或其他传参,还原之前的操作。

使用策略

  • 每次从首页进入相册页或者产品详情页,把页面对应的参数【例如?p=xiangce】附着到当前html页面地址后面,使用history.pushState塞到浏览器历史中
  • 执行浏览器后退,会触发 window.onpopstate 事件,通过绑定 popstate 事件,实现自己想要的需求。

调用

添加进历史记录

> history.pushState({}, "页面的标题", '?p=xiangce');

替换

> history.replaceState(null, "页面的标题", '?p=xiangce');

执行返回

window.addEventListener('popstate', function() {
    var currentState = history.state;
    // 执行...
})

另外这个需求是在移动端做的。兼容性?边qu..

卖萌🐶

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦