uniapp webview web-view组件监听网页变化 url变化 与网页通讯

uniapp webview web-view组件监听网页变化 url变化 与网页通讯

需求是在app页面内嵌套自己的h5 或者别人的h5 切换页面时候获取到网页的变化 url的变动

第一种方法就是使用 html5+的方法

javascript 复制代码
//html部分
<web-view :src="webviewPath" class="webview" height="100%" :webview-styles="{width:'100%',height:'100%'}"
			id="webview" ></web-view>
//js部分	
<script>
export default {
onReady() {
// 获取当前Webview窗口对象
			const ws = plus.webview.currentWebview();
			var currentWebview = this.$scope.$getAppWebview()
			setTimeout(() => {
			let wv = currentWebview.children()[0];
			_this.ws.loadURL(_this.webviewPath) //加载h5链接
			// 监听窗口触屏事件
				_this.ws.addEventListener('touchstart', function(e) {
					setTimeout(() => {
						let orderUrl = _this.ws.getURL() //页面链接
						const wsTitle = _this.ws.getTitle() //页面标题
						console.log(_this.ws.getTitle())
						console.log(orderUrl)
						console.log('touchstart');
					}, 100)

				}, false);
				_this.ws.onloaded = () => {
					let orderUrl = _this.ws.getURL()
					console.log('onloaded事件加载完成', orderUrl)
				};
			},1000)//如果是页面初始化调用时,需要延时一下 
}
}
</script>

第二种方法就是使用 html5+的方法 和uniapp的 uni.webview.js

使用uni.webview.js 就可以实现h5和app通讯了,想要h5的任何数据都用通过 uni.webView.postMessage来传递给

app

javascript 复制代码
//html部分
<web-view :src="webviewPath" class="webview" height="100%" :webview-styles="{width:'100%',height:'100%'}"
			id="webview" @message="receiveMsg"></web-view>
	methods: {
			wsEvalJs() {
				// 在webview加载完成后,注入JavaScript代码
				this.ws.evalJSSync(`
				       var script = document.createElement('script');
				       script.src = 'https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js';
				       document.body.appendChild(script);
							 document.addEventListener("UniAppJSBridgeReady", function() {
							   console.log("初始化uniapp的API成功");
								 uni.webView.postMessage({ data: { type: "href",href:window.location.href,msg:"获取页面url" } });
							 });
				      `);
			},
				//接收wenview h5的消息
			receiveMsg(option){
				console.log('接收到的消息参数'+JSON.stringify(option))
				
			},
			}
相关推荐
二川bro1 分钟前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹11 分钟前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风15 分钟前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱22 分钟前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年22 分钟前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵32 分钟前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_36 分钟前
分片上传-
前端·javascript·状态模式
东北南西40 分钟前
手写React状态hook
前端·javascript·react.js
诗书画唱41 分钟前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
lypzcgf42 分钟前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台