关于APP内嵌H5后退按钮问题

phoenixsky 发布于2019-08-22 11:07 / 1634人阅读

摘要：最近都在用做内嵌页面，在点击后退时如果在路由中跳转过多次点后退会后退很多次才能退出页面用户体验很差。同时，这些方法会和事件一起工作。

最近都在用vue做APP内嵌H5页面，在APP点击后退时如果在路由中跳转过多次点后退会后退很多次才能退出页面用户体验很差。

下面来说下解决方法
因为hisotry模式官方说需要服务器配置所以路由一直在用hash模式，针对这一需求需要了解h5新加的history模式

H5引入了history.pushState()和history.replaceState()这两个方法，他们允许添加和修改history实体。同时，这些方法会和window.onpostate事件一起工作。

pushState方法用一个新的url取代当前页面的url并把当前页面的url存进历史记录，

replaceState只用新url取代当前页面的url，但是不把当前页面的url存进历史记录

pushState()有三个参数:state对象，标题字符串(现在没有浏览器支持)，URL字符串(可选，如果为空，设置为当前页面的url)

只有前进后退可以触发popstate事件，对于不是通过pushState，replaceState两个方法产生的url，state对象为空
所以首先监听一下popstate事件在监听事件里直接调回退的方法

  window.addEventListener("popstate", function(e) {
    window.history.back()
  }, false);

这样就可以直接退出当前页面了

还要history在服务器端渲染不出来的问题前端其实也可以用一种笨方法解决的

把你服务器的地址直接卸载路由里，根路径要把你页面的名字带上，就像这样

因为在APP里所以也不存在刷新页面找不到的问题，就不需要服务端来帮忙啦~
希望可以帮到有类似需求的小伙伴，有更好的方法的大神也来指导下

GPU云服务器云服务器 html 按钮后退 h5后退 js数据不存在 webrtc内嵌到app中关于php问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91817.html

「前端早读君009」快速小程序开发之微信小程序内嵌 H5

摘要：前言微信小程序中可以直接运行页面，这一新组件的产生，可能直接导致小程序数量迎来一波高峰。微信小程序配置系列问题配置域名业务域名中配置的就是小程序以及和中引用的域名。今日励志语要接受自己行动所带来的责任而非自己成就所带来的荣耀。前言微信小程序中可以直接运行 web 页面，这一新组件 web-view 的产生，可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型，微信小程序后台...

wh469012917 2019-08-23 14:28 评论0 收藏0
H5实例教学--微信内嵌视频1（案例浅析）

摘要：但好在中，新增了属性，可以使视频内联播放。以上为该案例主要需要解决的问题。补充资料视频播放优化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上为案例二维码首个H5案例解析从头开始分析在 iOS 上，APP 都是使用的系统自带的浏览器进行页面渲染，video 播放视频的效果是统一的，只需要考虑不同的 iOS ...

quietin 2019-08-20 14:29 评论0 收藏0