解决Webview加载不完全导致部分js无效

简介: 问题出现有两种情况:一种情况是打开activity时webview开始加载页面,但是发现加载了一部分后就停止了,余下的一直不再加载。但是当关闭这个activity时发现webview又继续加载了。第二种情况是webview正常加载,但是进行操作时发现有些操作没有反应。比如接入支付宝国际sdk,未装支付宝app而使用h5页面时出现点击无反应的情况。

问题出现


有两种情况: 一种情况是打开activity时webview开始加载页面,但是发现加载了一部分后就停止了,余下的一直不再加载。但是当关闭这个activity时发现webview又继续加载了。

第二种情况是webview正常加载,但是进行操作时发现有些操作没有反应。比如接入支付宝国际sdk,未装支付宝app而使用h5页面时出现点击无反应的情况。


问题解析


进过反复测试发现,是因为有两个含有webview的activity:activityA和activityB。在activityA的onPause和onResume中分别有mWebView.pauseTimers()mWebView.resumeTimers(),但是activityB中没有。先打开activityA加载web页面,然后打开activityB,因为activityB没有resumeTimers,他的部分js未成功加载,所以出现上面的现象。


问题根源


问题的根源就是WebView的pauseTimers()和resumeTimers()这两个方法。它们的源码及注释如下


/**
 * Pauses all layout, parsing, and JavaScript timers for all WebViews. This
 * is a global requests, not restricted to just this WebView. This can be
 * useful if the application has been paused.
 */
public void pauseTimers() {
    checkThread();
    mProvider.pauseTimers();
}
/**
 * Resumes all layout, parsing, and JavaScript timers for all WebViews.
 * This will resume dispatching all timers.
 */
public void resumeTimers() {
    checkThread();
    mProvider.resumeTimers();
}
复制代码


可以看到这两个方法都是全局的,可以停止所有WebView的加载。所以当打开activityB的时候走了activityA的生命周期onPause,这样执行了pauseTimers(),而因为是全局的所以作用到所有的webview,所以activityB的webview也被pause而停止了加载,同时因为activityB的生命周期中并没有实现这两个函数,所以在pauseTimers()后没有执行resumeTimers(),所以activityB的web页面被pause后也没有恢复,这样就导致了一部分js代码没有加载,这样相关的效果就失效了。


解决方法


通过上面分析,其实我们就知道该如何解决了,在activityB的onPause和onResume中也加入mWebView.pauseTimers()mWebView.resumeTimers()即可。但是像我们前面说的第二种情况,我们使用的是第三方sdk的话,那么我们是没办法对其进行修改的,我们可以将activityA中的mWebView.pauseTimers()mWebView.resumeTimers()方法去掉来保证页面正常。


最后注意,webview还有onPause()onResume这两个方法。这两个方法与pauseTimers()resumeTimers()不同,他们两个是作用范围在当前webview的。而且作用效果也不同:onPause()会立刻停止当前webview的加载;而pauseTimers()会停止所有webview的延时加载,即那些等待timeout才执行的function,并且不执行resumeTimers()就不会加载。



目录
相关文章
|
11月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1563 58
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
743 3
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
310 1
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
编解码 缓存 算法
Three.js如何降低3D模型的大小以便更快加载
为加快600MB的3D模型在Three.js中的加载速度,可采用多种压缩方法:1) 减少顶点数,使用简化工具或LOD技术;2) 压缩纹理,降低分辨率或转为KTX2等格式;3) 采用高效文件格式如glTF 2.0及draco压缩;4) 合并材质减少数量;5) 利用Three.js内置优化如BufferGeometry;6) 按需分批加载模型;7) Web Workers后台处理;8) 多模型合并减少绘制;9) 使用Texture Atlas及专业优化工具。示例代码展示了使用GLTFLoader加载优化后的模型。
2317 12
|
Android开发
【Azure 环境】移动应用 SSO 登录AAD, MSAL的配置为Webview模式时登录页面无法加载
【Azure 环境】移动应用 SSO 登录AAD, MSAL的配置为Webview模式时登录页面无法加载
338 0
|
前端开发 JavaScript Linux
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
227 0
|
JavaScript 前端开发
JavaScript引入全攻略:提升网页加载速度的秘诀!
JavaScript引入全攻略:提升网页加载速度的秘诀!
|
资源调度 JavaScript 前端开发
如何大幅减少 Vue.js 中的包大小和加载时间,提升用户体验!
如何大幅减少 Vue.js 中的包大小和加载时间,提升用户体验!

热门文章

最新文章