H5 踩坑记录

记录个人遇到或他人分享的 H5 相关踩坑记录

WebView 返回上一页不刷新

为了提升浏览网页的效率加入了缓存机制，导致 WebView 返回上一页时不会刷新

解决方法：

监听 pageshow 事件，通过 persisted 或 performance.navigation.type 属性判断当前页面是否通过缓存载入

const onPageShow = (e) => {
  if (e.persisted || (window.performance && window.performance.navigation.type === 2)) {
    location.reload()
  }
}
window.addEventListener('pageshow', onPageShow)

禁用 QQ 浏览器下拉展示网页来源

在 QQ 浏览器和微信内置浏览器中，下拉网页会展示网页来源，影响用户体验

解决方法：

监听滚动容器的 touchmove 事件，通过 stopPropagation 方法阻止事件冒泡

const onTouchMove = (e) => {
  e.stopPropagation()
}

document.querySelector('body').addEventListener('touchmove', onTouchMove)