uniapp 如何向webview发送消息

在uniapp中，如何向webview组件发送消息？我尝试了uni.postMessage()方法，但webview页面接收不到消息。请问正确的实现方式是什么？是否需要特定的配置或监听事件？

2 回复

在uniapp中，向webview发送消息可以使用uni.postMessage方法。在webview页面中，通过uni.onMessage监听消息。示例：

// 发送消息
uni.postMessage({ data: '消息内容' });

// 接收消息
uni.onMessage((data) => {
  console.log(data);
});

注意：需在webview页面加载完成后发送。


在 UniApp 中，向 Webview 组件发送消息主要通过 uni.postMessage 方法实现。以下是详细步骤和示例代码：

实现步骤：

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

示例代码：

1. UniApp 页面（发送消息）：

// 在 UniApp 的 Vue 页面中
export default {
  methods: {
    sendMessageToWebview() {
      // 获取 Webview 对象
      const webview = this.$scope.$getAppWebview(); // 或使用 uni.getCurrentSubNVue()
      // 向 Webview 发送消息
      webview.evalJS(`window.postMessage(${JSON.stringify({ type: 'fromUniApp', data: 'Hello Webview!' })}, '*')`);
      // 或使用 uni.postMessage（需 Webview 配合）
      uni.postMessage({
        data: {
          msg: 'Hello from UniApp!'
        }
      });
    }
  }
}

2. Webview 内网页（接收消息）：

<!DOCTYPE html>
<html>
<head>
    <title>Webview Page</title>
</head>
<body>
    <script>
        // 监听 message 事件
        window.addEventListener('message', function(event) {
            // 验证来源（可选）
            // if (event.origin !== 'https://your-domain.com') return;
            
            // 处理接收到的消息
            console.log('Received message:', event.data);
            if (event.data.type === 'fromUniApp') {
                alert('Message from UniApp: ' + event.data.data);
            }
        });

        // 如果使用 uni.postMessage，需通过特定方式监听（如 UniApp 的 API）
        document.addEventListener('UniAppJSBridgeReady', function() {
            // 监听 UniApp 消息
        });
    </script>
</body>
</html>

注意事项：

  • 同源策略：确保 UniApp 和 Webview 网页遵守同源策略，或使用 postMessage 的 targetOrigin 参数限制来源。
  • Webview 引用：正确获取 Webview 对象（例如通过 uni.getCurrentSubNVue() 或页面引用）。
  • 兼容性：某些环境下可能需要通过 evalJS 直接执行 JavaScript 代码。

替代方案：

如果以上方法不适用，可通过 URL 参数 或 本地存储（如 localStorage）传递数据，但实时性较差。

以上方法适用于 UniApp 向嵌入的 Webview 发送消息，需根据实际场景调整。

回到顶部