uniapp 通过 plus.webview.create 创建的webview 如何监听 message 事件？

在uniapp中使用plus.webview.create创建了一个webview页面，现在需要在webview中监听message事件，请问该如何实现？具体代码应该怎么写？是否需要对webview进行特殊配置才能接收消息？

2 回复

在创建webview后，使用addEventListener监听message事件：

let webview = plus.webview.create(url);
webview.addEventListener('message', function(e){
  console.log('收到消息：', e.data);
});

注意：需要在webview中通过uni.postMessage发送消息才能触发。


在 UniApp 中，使用 plus.webview.create 创建的 Webview 可以通过 addEventListener 方法监听 message 事件。以下是具体实现步骤和代码示例：

步骤：

  1. 创建 Webview 对象。
  2. 使用 addEventListener 监听 message 事件。
  3. 在事件回调中处理接收到的数据。

代码示例：

// 创建 Webview
let webview = plus.webview.create('https://example.com', 'example', {
  // 可选：配置 Webview 参数
});

// 监听 message 事件
webview.addEventListener('message', function(e) {
  // e.data 包含从 Webview 页面发送的数据
  console.log('收到消息:', e.data);
  
  // 根据数据内容执行操作，例如：
  // if (e.data.action === 'close') {
  //   webview.close();
  // }
}, false);

// 显示 Webview（可选）
webview.show();

说明：

  • 事件类型：使用 'message' 作为事件类型。
  • 回调参数：事件对象 e 的 data 属性包含发送的消息（通常是字符串或对象）。
  • 数据格式：建议使用 JSON 格式在 Webview 内外传递结构化数据。
  • 通信方式：Webview 页面可通过 window.parent.postMessage 发送消息（需确保跨域策略允许）。

注意事项：

  • 确保 Webview 页面和 UniApp 主页面在同一域名或配置了跨域权限，以避免通信失败。
  • 如果消息未触发，检查 Webview 页面是否正确调用了 postMessage。

以上代码简洁实现了监听功能，适用于 UniApp 的 Webview 消息通信场景。

回到顶部