ios webview首次打开h5页面白屏时间过长问题

1、vue项目webpack设置js脚本和css文件不插入(inject: false)

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports={
		....,
		configureWebpack: config => {
		    config.plugins.forEach((val) => {
		        if (val instanceof HtmlWebPackPlugin) {
		            val.userOptions.inject = false;
		        }
		    })
		},
		...,
}

2、展示loading或者假的内容页面

主要是告诉用户,已经进入我们的页面了,给用户一个反馈;

3、获取js脚本和css文件列表,插入到文件中

在index.html页面

// 插入css文件
<% for (var css in htmlWebpackPlugin.files.css) { %>
	<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
// 插入js文件
		var isApple = /iphone|ipad|ios|mac/gi.test(navigator.userAgent);
		var htmlWebpackPluginFiles = <%= JSON.stringify(htmlWebpackPlugin.files) %>;
		var appendList = [];
		var bodyDom = document.getElementsByTagName('body')[0]
		function createTag (source) {
		  return source.map(function(item) {
			var temp = document.createElement('script');
			temp.src = item;
			temp.crossorigin = '';
			return temp;
		  })
		}
		appendList = createTag(htmlWebpackPluginFiles.js)
		function appendSource() {
		  appendList.forEach(function (item) {
			bodyDom.appendChild(item);
		  })
		}
		if (isApple) {
		  requestAnimationFrame(appendSource)
		} else {
		  appendSource();
		}

4、页面加载完成后,隐藏loading或或者假的内容页面

### iOS环境下H5页面WebView中无法滚动的解决方案 在iOS环境中,H5页面WebView中无法滚动的问题可能由多种原因引起。以下是一些常见的解决方法及其背后的原理。 #### 1. 禁止默认事件以避免冲突 当H5页面iOS WebView中加载时,可能会因为触摸事件的默认行为导致滚动失效。通过监听`touchmove`事件并调用`preventDefault`方法可以有效避免这一问题。但需要注意的是,直接禁用`touchmove`会导致内部滚动容器也无法正常工作[^2]。 ```javascript document.body.addEventListener('touchmove', function (e) { if (e._isScroller) return; // 过滤掉具有滚动容器的元素。 e.preventDefault(); }, { passive: false }); // passive 参数不能省略。 ``` #### 2. 使用第三方滚动库 某些情况下,原生滚动机制可能无法满足需求,尤其是当页面中存在多个滚动区域时。此时可以考虑使用第三方滚动库(如`better-scroll`)来实现更灵活的滚动效果。与原生滚动相比,`better-scroll`不会受到iOS系统自带滚动逻辑的影响[^2]。 ```javascript import BScroll from 'better-scroll'; const wrapper = document.querySelector('.wrapper'); const scroll = new BScroll(wrapper, { scrollY: true, probeType: 3, }); ``` #### 3. 隐藏父级元素的溢出内容 有时,H5页面的滚动问题可能是由于父级元素的`overflow`属性设置不当引起的。可以通过递归修改所有父级元素的`overflow`属性为`hidden`来解决这一问题[^3]。 ```javascript const scrollFixup = (dom) => { if (dom.parentElement) { dom.parentElement.style.overflow = 'hidden'; scrollFixup(dom.parentElement); } }; scrollFixup(document.querySelector('.scroll-container')); ``` #### 4. 处理内存暴涨导致的白屏问题 如果WebView因内存消耗过大而终止进程,也可能间接导致滚动功能失效。在这种情况下,需要监听`webViewWebContentProcessDidTerminate`事件并在进程终止后重新加载页面[^1]。 ```swift func webViewWebContentProcessDidTerminate(_ webView: WKWebView) { print("进程被终止") webView.reload() } ``` ### 注意事项 - 在实现上述解决方案时,需根据具体场景选择合适的策略。 - 如果页面中包含多个滚动区域,建议优先使用第三方滚动库以确保兼容性和稳定性。 - 对于iOS 13及以上版本,部分解决方案可能无效,需额外测试和调整[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值