vue页面

<template>
	<view class="content">
		<web-view :src="src" @message="message"></web-view>
	</view>
</template>
<script>
    export default {
        data() {
            return {
                src: ''
            }
        },
        methods: {
            message(data){
                if(data.detail){
                                    uni.navigateTo({
                                        url: data.detail.data[0].navigateTo
                                    });
                }
            }
        },
        onLoad() {
            // #ifdef H5
            window.postMessage = this.message
            // #endif
        },
        onShow() {
            this.src = '/hybrid/html/xxx.html'
        }
    }
</script>
<style>
</style>

xxx.html页面通过此方法实现调用父页面“message”的方法

<!-- uni 的 SDK，必须引用 -->  
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
<!-- 中继器代码 --> 
<script type="text/javascript" src="./js/common.js"></script>

<script>
parentMessage({navigateTo:'pathShow'})
</script>

common.js 中继器代码

mui.ready(function(){
        //这段代码很重要，通过uni.navigateTo跳转页面的时候无法返回，会报mui undefined
    mui.init({
        keyEventBind: {
            backbutton: false //关闭back按键监听
        }
    });
})
function parentMessage(option){
    var data = {
        data: option||{}
    }
    if(mui.os.plus){
        uni.postMessage(data);
    }else{
        window.parent.postMessage({"type":"message","target":{},"currentTarget":{},"timeStamp":new Date().getTime(),"detail":{"data":[data.data]}})
    }
}

https://uniapp.dcloud.io/component/web-view

本文地址：
转载请著名出处，谢谢！
欢迎交流
QQ：419268793