uniapp plus.webview.create创建的web-view如何监听web-view消息事件？

在uniapp中，使用plus.webview.create创建的web-view组件，如何监听web-view内部发送的消息事件？我需要在H5页面和uniapp之间实现通信，但不知道具体该怎么实现回调监听。求教具体的代码实现方法！

2 回复

在uniapp中，使用plus.webview.currentWebview()获取当前webview对象，然后调用addEventListener监听'message'事件即可接收web-view发送的消息。


在 UniApp 中使用 plus.webview.create 创建的 Webview 组件，可以通过 addEventListener 方法监听来自 Webview 内部的消息事件。具体步骤如下：

  1. 创建 Webview 并监听消息：

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

// 添加消息事件监听
webview.addEventListener('message', function(e) {
  // e.data 包含从 Webview 内部发送的消息数据
  console.log('收到消息:', e.data);
  // 处理消息逻辑，例如解析 JSON 数据
  try {
    let msgData = JSON.parse(e.data);
    // 根据 msgData 执行操作
  } catch (err) {
    console.error('消息解析失败:', err);
  }
});

// 显示 Webview（例如追加到当前页面）
webview.show();

  2. Webview 内部发送消息： 在 Webview 加载的页面中，通过 uni.postMessage 或标准 window.parent.postMessage 发送消息：

    // 在 Webview 的 HTML 页面中
uni.postMessage({ data: { key: 'value' } }); // UniApp 方式
// 或
window.parent.postMessage(JSON.stringify({ key: 'value' }), '*'); // 标准方式

注意事项：

  • 确保 Webview 已加载完成后再发送消息（可在 loaded 事件后操作）。
  • 消息数据通常为字符串，需通过 JSON.parse 解析为对象。
  • 如果跨域，需配置 Webview 的 crossorigin 属性或服务端允许通信。

通过以上方法，即可实现 UniApp 中监听自定义 Webview 的消息事件。

回到顶部