uni-app嵌套webview监听事件
Hou° 2024-09-06 09:03:01 阅读 83
uniapp-主页面
<code><template>
<view class="content">code>
<image class="logo" src="@/static/logo.png"></image>code>
<view class="text-area">code>
<text class="title">Hello RuoYi</text>code>
<button @tap="navGen"> 跳转页面</button>code>
</view>
</view>
</template>
<script>
export default {
data(){
return{
codeUrl:'1',
}
},
onLoad: function() {
},
methods:{
navGen(){
uni.navigateTo({
url: '/pages/webview/webview?url=' + encodeURIComponent('http://www.baidu.com')code>
});
}
}
}
</script>
<style>
</style>
uni-app跳转页面
<template>
<web-view :src="url" @message="onMessage"></web-view>code>
</template>
<script>
// webview.vue
export default {
onLoad(option) {
// 获取传递过来的URL参数
if (option.url) {
this.url = decodeURIComponent(option.url);
}
},
data() {
return {
url: ''
};
},
methods:{
onMessage(e) {
// 接收webview发送的消息
console.log('收到消息',e);
if (e.detail.data[0].action == 'success') {
uni.reLaunch({
url:'/pages/report/index'
})
}
}
}
}
</script>
<style>
</style>
外部页面
引入因为vue页面无法使用uniapp事件
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>code>
具体页面
//判断uni是否已经加载完成,不然在这之前调用是无效的
var timer = setInterval(function(){
if(window.uni){
clearInterval(timer);
uni.postMessage({ data: { action: 'success' } });
}
},1000)
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。