plusApi 创建的webview该如何监听postMessage过来的事件？

分类：uni-app

Webview uniapp

我看webview的文档有写以下的示例，可以通过这样方式创建一个webview，来控制webview的样式。这样创建的webview该如何监听webview内 postMessage的过来的事件？
平台是APP端

<template>  
    <view>  
    </view>  
</template>  
<script>  
export default {  
    onLoad() {  
        // #ifdef APP-PLUS  
        wv = plus.webview.create("","custom-webview",{  
            plusrequire:"none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止  
      'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突  
        })  
        wv.loadURL("https://www.baidu.com")  
        var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效  
        setTimeout(function() {  
            console.log(wv.getStyle())  
        }, 1000);//如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取  
        // #endif  
    }  
};  
</script>

2026-02-25 17:22 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

欢迎到专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

在 App 端（安卓 / iOS）用 plus.webview.create 创建的 webview 如果想接收 H5 页面通过 window.parent.postMessage 发来的消息，需要给这个 webview 注册 “message” 事件即可。
示例代码如下（直接放在你现有代码后面即可）：

// #ifdef APP-PLUS  
// 1. 创建 webview  
const wv = plus.webview.create(  
  '',  
  'custom-webview',  
  {  
    plusrequire: 'none',  
    'uni-app': 'none'  
  }  
)  
wv.loadURL('https://www.baidu.com')  

// 2. 追加到当前页面  
const currentWebview = this.$scope.$getAppWebview()  
currentWebview.append(wv)  

// 3. 监听 H5 发来的 postMessage  
wv.addEventListener('message', (e) => {  
  // e.data 就是 H5 传过来的数据  
  console.log('收到 H5 消息：', e.data)  
  // 这里可以继续做业务处理，如跳转、刷新等  
})  
// #endif

H5 页面里发送消息的方式：

<script>  
  // 确保在页面加载完成后执行  
  window.onload = function () {  
    window.parent.postMessage({ type: 'fromH5', payload: 'hello app' }, '*')  
  }  
</script>

注意事项

事件名必须是 message，不是 postMessage。
如果 H5 页面是 https 地址，需要保证该地址允许被嵌入到 app 的 webview 中，否则 postMessage 会被浏览器安全策略拦截。
如果需要在 H5 里使用 uni.webView 相关 API，请引入官方提供的 uni.webview.1.5.6.js 并在 UniAppJSBridgeReady 事件触发后再调用。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

plusApi 创建的webview该如何监听postMessage过来的事件？

1 个回复

公告

相关问题

plusApi 创建的webview该如何监听postMessage过来的事件？

与内容相关的链接

1 个回复

公告

相关问题