uniapp 获取 webview 页面对象

UniApp 是一套用于快速开发跨平台应用的框架，它允许你在单个代码库中构建 Web、iOS、Android 等多种应用程序。当你需要在 UniApp 中操作 Webview 的页面内容时，可以使用其提供的 API 来获取对应的页面对象。

首先，确保你已经导入了相关的依赖，通常在 Vue 组件中会这样做：

<template>
  <uni-view>
    <!-- 其他组件内容 -->
    <web-view ref="myWebView"></web-view>
  </uni-view>
</template>

<script setup>
import { ref } from 'vue';
import { showToast, invokeMethod } from '@/utils/api';

const webViewRef = ref(null); // 通过ref绑定到Webview元素

// 当Webview加载完成后
onLoad(() => {
  webViewRef.value.addEventListener('load', () => {
    const page = webViewRef.value.webViewJavascriptBridge; // 获取页面对象
    if (page) {
      // 使用page对象执行JavaScript方法或获取DOM节点等操作
      page.callHandler('someJsFunction', () => {
        // 执行回调或其他操作
      });
    }
  });
})
</script>

在这个例子中，`webViewRef`是一个Vue引用，当Webview加载完成时，你可以监听`load`事件，并从`webViewRef.webViewJavascriptBridge`获取到页面对象。然后，你可以通过这个对象调用Web页面中的JavaScript函数或者发送消息。