iOS H5 history.back() 返回上一路由页面白屏

问题描述

最近在做H5项目的时候，发现使用history.back()在IOS上返回上一页的时候，会有很严重的bug。我的场景是列表页滚动了超出一屏之后，进入详情页，再点击返回列表页，在iOS上就出现了白屏的现象，但是触屏或者滑一下，页面就又恢复了。

解决方案

1、使用绝对定位

这个也是参考了网上的写法，把列表页高度设为100%，绝对定位

 .container {position: absolute;height: 100%;overflow: scroll;-webkit-overflow-scrolling: touch;}

绝对定位之后，没有再出现白屏现象。但是，这种写法体验非常差，在iOS上滚动很生硬，还会有回弹的现象，而且也不利于容器内部一些样式的拓展，例如背景图片等等。

2、改变history.scrollRestoration （推荐）

使用history.back返回上一页的时候，浏览器会记录页面的滚动位置，而在iOS上面，滚动后返回的时候页面渲染会出现问题，导致白屏。可以利用scrollRestoration属性，它默认是auto，也就是会记录滚动位置（这是H5新增的属性，所以需要判断浏览器是否支持，我实践的是可以兼容大部分移动端机型）

 if ('scrollRestoration' in history) {history.scrollRestoration = 'manual'; //改为manual之后，就不会记录滚动位置}

在列表页渲染完成的生命周期函数里添加以上代码，可以解决白屏问题

参考文章：

https://stackoverflow.com/questions/10742422/prevent-browser-scroll-on-html5-history-popstate
https://blog.csdn.net/m0_38069630/article/details/80573283

iOS H5 history.back() 返回上一路由页面白屏相关推荐

苹果手机，ios系统history.back()返回却不刷新页面
项目里点击提交按钮以后,需要返回上一页并且刷新页面,在安卓手机上可以,但是在苹果手机上只能返回上页但是不刷新. 原文链接:https://blog.csdn.net/hbts_901111zb/art ...
微信中苹果h5页面用window.history.go(-1)返回上一页页面不会重新加载/刷新
微信中h5页面用window.history.go(-1)返回上一页页面不会重新加载问题问题描述:在实际开发中遇到这样一个问题,业务需求涉及到返回上一页问题,第一时间想到了window.history ...
react 点击按钮返回上一级路由
1.在要点击的按钮或者文字上添加 <span onTouchStart={this.backClick} > </span> 2. 事件编写 // 点击按钮返回上一个路由 ba ...
Vue 返回上一页页面不刷新
Vue 返回上一页页面不刷新场景:首页点进列表页时要刷新数据,信息页返回列表页时不刷新数据首先在router.js中配置 {path: '/home',name: 'home',meta: {ti ...
app中加载h5页面白屏问题
一.问题描述:通过原生检查日志在网络不好的情况下,由于vue打包后的第三方js包加载失败导致h5页面白屏. 二.解决方案: 1.减少第三方依赖:在package.json中把不需要的包删除. 2.组件 ...
vue在ios返回上一路由白屏
问题描述: 进入A页面-->B页面-->ios自带的返回-->白屏出现-->手动点击白屏处-->问题解决有时候当你加载第二页或者下拉到更高的高度的时候会出现白屏,这跟v ...
h5页面 iOS 回退上一页面白屏，滑动页面后正常
问题:h5页面 iOS 回退上一页面,出现白屏,滑动页面后正常展示描述:h5在ios上,第一个页面超过一屏,点击进入第二个页面,第二个页面滑动超过一屏时,返回第一个页面时,第一个屏幕有一块白的盖在上 ...
html 中返回上一步页面,（移动端）在APP中嵌入H5网页，返回上一步返回APP菜单首页...
H5页面中:返回上一步固定写法(前端实现:使用vue框架的返回上一步语法即可): methods:{ backforward(){ this.$router.back(-1); // 返回上一步 }, ...
html5返回上一页不刷新,javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题...
我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...

iOS H5 history.back() 返回上一路由页面白屏

问题描述

解决方案

1、使用绝对定位

2、改变history.scrollRestoration （推荐）

iOS H5 history.back() 返回上一路由页面白屏相关推荐

最新文章

热门文章

iOS H5 history.back() 返回上一路由 页面白屏

问题描述

解决方案

1、使用绝对定位

2、改变history.scrollRestoration （推荐）

iOS H5 history.back() 返回上一路由 页面白屏相关推荐

最新文章

热门文章

iOS H5 history.back() 返回上一路由页面白屏

iOS H5 history.back() 返回上一路由页面白屏相关推荐