uniapp如何调用webview里的window方法

在uniapp中开发时，如何在当前页面的webview组件里调用嵌入网页的window对象下的方法？比如网页中定义了window.myFunction()，需要从uniapp端主动触发这个方法。尝试过uni.webView.postMessage()但无法直接调用目标函数，请问正确的实现方式是什么？是否需要通过特定的通信协议或事件监听来完成？

2 回复

在uniapp中，可以通过uni.webView.postMessage()向webview发送消息，然后在webview页面通过window.addEventListener('message')接收并调用相应方法。


在uni-app中调用Webview内部页面的window方法，可以通过uni.webview.js桥接实现。以下是具体步骤：

1. 引入uni.webview.js

在Webview加载的HTML页面中引入官方桥接文件：

<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-webview/uni.webview.1.5.4.js"></script>

2. Webview页面注册方法

在HTML页面中通过uni对象注册方法供APP调用：

// 在Webview页面的JavaScript中
uni.registerGlobalMethod('customMethod', function(data) {
    // 执行window方法或自定义逻辑
    console.log('收到APP调用，参数：', data);
    window.someMethod(data); // 调用window上的方法
    return '执行成功';
});

3. UniApp调用Webview方法

在uni-app页面中通过webview组件引用和通信：

<template>
  <webview 
    :src="webviewUrl" 
    ref="myWebview"
    @message="onWebviewMessage">
  </webview>
</template>

<script>
export default {
  data() {
    return {
      webviewUrl: '/hybrid/html/index.html'
    }
  },
  methods: {
    callWebviewMethod() {
      const webview = this.$refs.myWebview;
      // 调用Webview中注册的方法
      webview.evalJS(`uni.callGlobalMethod({
        method: 'customMethod',
        data: { key: 'value' },
        success: (res) => console.log(res)
      })`);
    },
    onWebviewMessage(e) {
      console.log('收到Webview消息', e.detail);
    }
  }
}
</script>

4. 双向通信（可选）

Webview页面也可以主动向uni-app发送消息：

// 在Webview页面中
uni.postMessage({
  type: 'eventFromWebview',
  data: { message: 'Hello from Webview' }
});

注意事项：

  1. 安全限制：确保通信双方可信，避免XSS攻击
  2. 路径配置：H5端需将uni.webview.js放在静态资源目录
  3. 数据类型：传递的数据需为可序列化对象
  4. 生命周期：确保Webview加载完成后再调用方法

通过这种方式，uni-app和Webview内页面可以实现完整的方法调用和数据通信。

回到顶部