uniapp h5如何给webview发送消息

在uniapp开发的H5页面中，如何实现向嵌入的webview发送消息？需要从H5页面向webview传递数据并触发相应事件，求具体实现方法和代码示例。

2 回复

使用uni.postMessage向Webview发送消息。示例：

uni.postMessage({
  data: {
    msg: 'Hello Webview'
  }
});

在Webview页面通过window.addEventListener('message', callback)接收。


在 UniApp 的 H5 环境中，可以通过 uni.postMessage 向 Webview 发送消息。以下是实现步骤和示例代码：

实现方法

  1. 在 UniApp 页面中发送消息：
    使用 uni.postMessage 向 Webview 发送数据。
  2. 在 Webview 页面接收消息：
    通过 window.addEventListener('message', ...) 监听消息事件。

示例代码

1. UniApp 页面（发送消息）

// 在 UniApp 的 H5 页面中
// 假设 Webview 的 URL 为：https://example.com
// 向 Webview 发送消息
uni.postMessage({
  data: {
    type: 'fromUniApp',
    message: 'Hello from UniApp H5!'
  }
});

2. Webview 页面（接收消息）

<!-- 在 Webview 的 HTML 页面中 -->
<script>
  window.addEventListener('message', function(event) {
    // 检查消息来源，确保安全性
    if (event.origin !== 'https://your-uniapp-domain.com') return;
    
    // 解析 UniApp 发送的数据
    const data = event.data;
    if (data && data.type === 'fromUniApp') {
      console.log('收到消息:', data.message);
      // 执行其他操作
    }
  });
</script>

注意事项

  • 域名安全：在 Webview 中通过 event.origin 验证消息来源，避免恶意数据。
  • 数据格式：uni.postMessage 发送的数据需为对象，且通过 event.data 接收。
  • 平台兼容性：此方法仅适用于 H5 平台，其他平台（如小程序、App）需使用不同 API。

完整流程

  1. UniApp 页面调用 uni.postMessage 发送数据。
  2. Webview 页面通过 message 事件监听并处理数据。

通过以上方法，即可实现 UniApp H5 向 Webview 发送消息的功能。

回到顶部