uniapp使用webview内嵌网页、从内嵌网页回退到平台方法

ajzzz

已于 2024-01-18 19:50:41 修改

阅读量1k

点赞数 8

文章标签： uni-app webview

于 2024-01-17 13:58:43 首次发布

本文链接：https://blog.csdn.net/weixin_43952634/article/details/135648632

版权

本文讲述了作者在将H5代码嵌入uniapp时遇到的跨域问题，通过监听web-view中的message事件以及在H5页面中绑定parent.postMessage方法来实现从APP内部调用uniapp页面的回退操作。

摘要由CSDN通过智能技术生成

使用官网案例发现APP可用，h5本地代码也可以，但打包到服务器后会出现报错，同事猜测是跨域问题，于是h5端绑定新方法返回
uniapp页面：

<web-view :src="url" ref="webview" ></web-view>
==============js
// H5平台监听消息 app端直接游戏内调用uniapp返回方法
	 // #ifdef H5
		window.addEventListener('message',function(e){
			if(e.data === 'back'){
				window.history.go(-1)
				// uni.navigateBack()
			}
		})
	// #endif

内嵌页面：

//官网下载代码后放到资源文件夹直接import进来使用
import uni from '...............'
goBack(){
//安卓APP直接使用
	if(uni){
		uni.navigateBack()
	}
	//h5页面会出现报错，绑定另一个方法返回
	if(window && window.parent && window.parent.postMessage){
	    window.parent.postMessage( 'back','*');
	}
}