[移动开发]uni-app nvue（weex ）的web-view bug处理（ios中pagestart事件过早触发问题）

设备

苹果6 plus

ios版本

12.5.5

pagestart事件描述

pagestart在web窗口开始加载时触发，在uni-app的文档中并是没有的写上，需要去翻阅weex的文档。
如：a.com跳转到a.com/index.php时，在刚刚加载了index.php时，就会触发

bug说明

在ios中（仅苹果6 plus，其他苹果类型设备未测试）却发现pagestart过早触发，
表现在：a.com跳转到a.com/index.php时，pagestart事件是在a.com页面中触发的

解决方法

在pagestart事件中不断循环执行，直到执行的代码在a.com/index.php中执行才停止，至于怎么判断代码在a.com/index.php中执行了，请看下面实例

代码实例

<template><view>
	<web-view ref="tbDetailsPic" @pagestart="pagestart($event, 'tbDetailsPic')" @onPostMessage="onPostMessage($event.detail.data[0], 'tbDetailsPic')"
		:src="src" style="width: 750rpx;height: 1500rpx;"></web-view>
</view></template>
<script>
export default {
	data(){
		return {
			src: 'https://tool.manmanbuy.com/m/disSitePro.aspx?c_from=m&url=https://item.jd.com/100011203359.html'
		}
	},
	methods: {
		pagestart(event, name, num){
			if(typeof(this.frameArrayPagestart) === 'undefined'){this.frameArrayPagestart = []}
			if(typeof(this.frameArrayPagestart[name]) === 'undefined'){//界面接受到了 or 第一次加载
				this.frameArrayPagestart[name] = false//页面还没有接收到
			}
			this.$refs[name].evalJs('var border_radiusPx="'+uni.upx2px(12)+'px";('+this.js+')()')
			let time = 10;
			setTimeout(() => {
				if(num === undefined){num = 0}
				if(this.frameArrayPagestart[name] === false && num < (10000 / time)){//循环执行，最长不超过n毫秒
					this.pagestart(event, name, ++num)
				}
			}, time);
		},
		onPostMessage(event, name){
			if(event.api === 'ios_host_ok'){
				this.frameArrayPagestart[name] = undefined
			}
		}
	},
	onLoad(){
		this.js = (function(){
			//网页向App发送实时消息
				!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function t(e,t){return n.call(e,t)}var i=[],a=function(e,n){var t={options:{timestamp:+new Date},name:e,arg:n};if(window.__dcloud_weex_postMessage||window.__dcloud_weex_){if("postMessage"===e){var a={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(a):window.__dcloud_weex_.postMessage(JSON.stringify(a))}var o={type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(o):window.__dcloud_weex_.postMessageToService(JSON.stringify(o))}if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:t,pageId:""},"*");if(0===i.length){var r=plus.webview.currentWebview();if(!r)throw new Error("plus.webview.currentWebview() is undefined");var d=r.parent(),s="";s=d?d.id:r.id,i.push(s)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}},"__uniapp__service");else{var w=JSON.stringify(t);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(w,",").concat(JSON.stringify(i),");"))}},o={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;a("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("redirectTo",{url:encodeURI(n)})},getEnv:function(e){window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a("postMessage",e.data||{})}},r=/uni-app/i.test(navigator.userAgent),d=/Html5Plus/i.test(navigator.userAgent),s=/complete|loaded|interactive/;var w=window.my&&navigator.userAgent.indexOf("AlipayClient")>-1;var u=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var g=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var v=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.qa&&/quickapp/i.test(navigator.userAgent);for(var l,_=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},f=[function(e){if(r||d)return window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&s.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),o},function(e){if(v)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(w){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(u)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(g)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(p){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){return document.addEventListener("DOMContentLoaded",e),o}],m=0;m<f.length&&!(l=f[m](_));m++);l||(l={});var E="undefined"!=typeof uni?uni:{};if(!E.navigateTo)for(var b in l)t(l,b)&&(E[b]=l[b]);return E.webView=l,E}));
			//解决ios的兼容性问题
				if(location.hostname === '' || typeof(xiangLeGou_injection) === 'boolean' || location.href === 'about:blank'){//
					return false
				}else{
					uni.postMessage({data: {api: 'ios_host_ok'}});
				}
			//确保该js只被注入一次
				if(typeof(xiangLeGou_injection) === 'boolean'){return}else{xiangLeGou_injection = true}
			//网页加载结束之后
				wangyeLoedOk = function(fn){
					if(['interactive','complete'].indexOf(document.readyState) > -1){//interactive=dom文档结构已经加载完毕【诸如图像，样式表和框架之类的子资源仍在加载】complete=完全加载
						fn();
					}else{
						document.onreadystatechange = () => {//状态发生改变时【这个事件是最快的，比 DOMContentLoaded 还快，因为 DOMContentLoaded 需要等待前面的css文件加载完毕】
							if(document.readyState === 'interactive'){//用这个if是因为，后面还会触发一次值等于 complete 的
								fn()
							}
						}
					}
				}
			wangyeLoedOk(function(){//窗口
				/*这段代码没有任何作用
				if(new RegExp(/manmanbuy\.com/).test(location.hostname)){//慢慢买
					if(new RegExp(/ValidateAlibaba\.aspx/).test(location.href)){//验证页面
						var style = document.createElement('style');
							style.innerText = 'html{background: #F0F0F0;}body{background: #FFF;border-radius: '+border_radiusPx+';}.container > *:not(#sc){height: 0;overflow: hidden;}.container > *{margin: 0 !important;}';
							document.body.appendChild(style);
						//向APP发送消息
							uni.postMessage({data: {api: 'lishijiaFrameHeight',data: {height: 100}}});
					}else if(new RegExp(/disSitePro\.aspx/).test(location.href)){//历史价
						if((arr = document.body.innerHTML.match(/flotChart\.chart\('(.*?)'/)) !== null){
							uni.postMessage({data: {api: 'lishijiaFrameArray',code: 1,data: arr[1]}});
						}else{
							uni.postMessage({data: {api: 'lishijiaFrameArray',code: 2}});
						}
						//隐藏 body内边距为0（页面js文件会设置内联样式，所以必须使用!important提升优先级）、APP内打开、历史价图表的所有兄弟元素、价格走势、数据由慢慢买整理提供
							var style = document.createElement('style');
							style.innerText = 'body{padding-bottom: 0 !important;}.offer_page .trendbox{margin-top: 0;padding-bottom: 13px;border-radius: '+border_radiusPx+';}.insert-app-download,.offer_page > *:not(.trendbox),.offer_page > .trendbox > .hd,.offer_page > .trendbox > .bd > .note{display: none;}';
							document.body.appendChild(style);
						//获取页面高度，高度发生变化就通知父窗口
							var trendboxDom = document.querySelector('.trendbox'), winHeight = 0, dingshiqi = setInterval(() => {
								if(winHeight != trendboxDom.clientHeight){//高度发生变化
									winHeight = trendboxDom.clientHeight
									uni.postMessage({data: {api: 'lishijiaFrameHeight',data: {height: winHeight}}});
								}
							}, 3);
					}
				}*/
			});
		}).toString()
	},
	onReady(){}
}
</script>
<style></style>