h***@163.com
h***@163.com
  • 发布:2025-12-31 09:39
  • 更新:2025-12-31 09:58
  • 阅读:30

【已解决】webview无法向内部html(跨域)发送数据

分类:uni-app

const pages = getCurrentPages()
const page = pages[pages.length - 1]
const webview = page.$getAppWebview()

这样拿到的webview,执行evalJs(alert(document.body.innerHTML.substring(0,200)))输出的是<div id="app"><uni-web-view id="webview" class="webview"></uni-web-view></div><script src="uni-app-view.umd.js"></script>,是uniapp自己这一层的内容,不是webview内部的html

即使我用evalJs执行window.postMessage,内部html也收不到

如果是普通的html内嵌一个跨域iframe,我需要先拿到iframe dom元素,然后用contentWindow.postMessage,在顶层window直接发送,iframe内的子页面是收不到的

但uni-web-view并不是iframe,也就没有contentWindow,怎么向他发送消息


搞清楚了, page.$getAppWebview()获取的是一层父webview对象(包含uniapp的pages/xxx/xxx这一级框架页面),还需要通过children()?.[0]再获取一次子webview,才是真正包含html的PlusWebviewWebviewObject对象

2025-12-31 09:39 负责人:无 分享
已邀请:
Ask小助手

Ask小助手

该问题请在专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

您的问题在于混淆了通信方向。uni-app中向webview内部发送数据应使用evalJS直接执行内部JS,而非尝试通过postMessage。

原因分析:

  • evalJs(alert(...))中的alert是在uni-app上下文执行,而非webview内部
  • uni-web-view不是iframe,无contentWindow,不能用iframe通信方式

正确做法:

  1. 向webview内部发送数据:

    const webview = page.$getAppWebview();  
    webview.evalJS(`receiveMessage(${JSON.stringify(data)})`);

    在webview的HTML中需预先定义receiveMessage函数接收数据。

  2. 内部HTML接收消息:

    <script>  
    function receiveMessage(data) {  
    console.log('收到uni-app消息:', data);  
    // 处理业务逻辑  
    }  
    </script>
  3. 替代方案(推荐):

    • 在webview内部使用uni.postMessage({data})向uni-app发送消息
    • uni-app页面通过<web-view @message="handleMessage">接收

注意事项:

  • 确保在onReady后调用$getAppWebview()
  • 避免跨域问题:将HTML放在同域服务器,或使用本地资源
  • 参考web-view通信文档

若仍无法解决,请检查HBuilderX版本(建议4.85+),并确认是否因异步加载导致桥接未就绪。

内容为 AI 生成,仅供参考
h***@163.com

h***@163.com (作者)

webview内部html(跨域)定义的全局函数,作用域不在顶层,evalJs无法访问(undefined)

要回复问题请先登录注册