网页向webview 发送消息， H5端。postMessage
效果
网页 h5 vue 代码 TravelHome.vue
btnClick() {
console.log('click');
// 网页向应用发送消息 向父vue页面发送信息
window.parent.postMessage({
data: {
code: "success",
test: "我是子页面的test！"
}
}, '*');
}
uni app webpage.vue 代码（包含 web-view）
onLoad(op) {
//监听发送过来的消息
window.addEventListener('message', this.handleMessage);
},
methods: {
handleMessage:function(msg) {
console.log("webview 接收到了消息 msg = ",msg.data);
},
}
网页TravelHome.vue h5 完整代码
<template lang="">
<van-button type="warning" @click="btnClick">按钮2</van-button>
</template>
<script>
export default {
name: "Home",
components: {
},
data() {
return {
};
},
mounted() {
},
methods: {
btnClick() {
console.log('click');
// 网页向应用发送消息 向父vue页面发送信息
window.parent.postMessage({
data: {
code: "success",
test: "我是子页面的test！"
}
}, '*');
},
}
}
</script>
<style lang="scss" scoped>
</style>
uniapp web-view webpage.vue 完整代码
<template>
<uni-nav-bar left-icon="back" background-color="#fff"
status-bar="true" >
</uni-nav-bar>
<view>
<web-view fullscreen="false" ref="webview" :webview-styles="webviewStyles" :src="urlSrc"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
webviewStyles: {
progress: {
color: '#FF3333'
}
},
urlSrc: 'http://localhost:5173/travel/travelhome',
}
},
watch: {
},
onLoad(op) {
//监听发送过来的消息
window.addEventListener('message', this.handleMessage);
},
methods: {
handleMessage:function(msg) {
console.log("webview 接收到了消息 msg.data = ",msg.data);
},
}
}
</script>
<style>
</style>
