uniapp web-view控制父页面跳转

近期开发uniapp项目,有一功能,需要在h5嵌套一个已有的pc 页面,但是pc的页面已经写死了返回的页面,uniapp上web-view嵌套使用的话需要进行适配,对于不是很熟悉前端的xdm来说还是比较晕的,直接上代码:

<!-- uni 的 SDK,必须引用,路径换成你们自己的路径,我这使用的是thymeleaf,根据你们自己获取方式即可。 -->
<script type="text/javascript" th:src="@{/static/js/uniapp/uni-webview-1.5.4.js}"></script>
<script>
	var jumpToUniappFunc;
	document.addEventListener('UniAppJSBridgeReady', function() {
	   uni.getEnv(function(res) {
	       console.log('当前环境:' + JSON.stringify(res));
	   });
	   jumpToUniappFunc = ()=>{
	       uni.navigateTo({
	         url:'/pages/xxxx/instance/instance-list'
	       })
	   }
	});
</script>

uniapp的web-view.js自行去官网下载:
https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js

然后使用JS判断是否来自H5或APP,是的话调用jumpToUniappFunc()进行跳转即可,isFromMobile是在后端通过request的User-Agent判断的,这里就不展示代码了。

// 是否来自移动端,true=是
var isFromMobile = [[${isFromMobile}]]

function toWaitReadList() {
    if(isFromMobile){
    	 // 移动端直接跳转
         jumpToUniappFunc()
         return
     }
     // pc跳转
     window.history.forward(1);
     window.location.href = `${adminPath}/xxxxx/xxxxx/list`
 }
posted @ 2022-09-29 19:46  青栀i  阅读(157)  评论(0)    收藏  举报  来源