在 .NET MAUI 中调用 JavaScript 代码,核心方式是通过
WebView控件配合
WebView.EvaluateJavaScriptAsync()方法实现 JS 执行;而双向交互(如 JS 调用 C#)则需借助
WebView.RegisterScriptMessageHandler()(MAUI 8+)或自定义
IWebViewDelegate(旧版本)。下面分场景说明实用做法:
直接执行 JS 代码(C# → JavaScript)
适用于简单操作,比如修改页面标题、触发弹窗、滚动到某位置等。注意:JS 必须在网页加载完成(
WebView.NavigationCompleted触发后)再执行,否则可能报错或无效。 确保 WebView 已加载完成,监听
NavigationCompleted事件 调用
await webView.EvaluateJavaScriptAsync("alert('Hello from C#');")
返回值为 string类型(JS 表达式结果的 JSON 字符串),如
await webView.EvaluateJavaScriptAsync("document.title") 返回当前标题
若 JS 报错,返回 null,建议加 try-catch 或检查返回值
从 JavaScript 调用 C# 方法(JS → C#)
MAUI 8 及以上推荐使用内置的消息处理器机制,安全且无需自定义渲染器。
在 C# 中注册消息处理器:webView.RegisterScriptMessageHandler("myHandler", OnReceiveMessage);
OnReceiveMessage是一个
Action<string></string>,接收 JS 发来的字符串消息(通常为 JSON) 在 HTML/JS 中调用:
window.chrome.webview.postMessage(JSON.stringify({cmd: "save", data: "abc"}));
注意:仅在 Windows 平台原生支持该 API;Android/iOS 需启用 WebView.UseCustomRenderer+ 自定义桥接(见下一条)
跨平台兼容的 JS ↔ C# 通信(Android/iOS/Windows)
为统一行为,建议封装一个轻量桥接层,基于 URL Scheme 拦截或注入 JS 接口。
立即学习“Java免费学习笔记(深入)”;
方法一(推荐):重写WebView的
NavigateAsync或监听
WebView.Navigating,拦截形如
myapp://call?method=login&data=xxx的跳转,解析后执行对应 C# 逻辑 方法二:在网页加载完成后,用
EvaluateJavaScriptAsync注入全局 JS 对象,例如:
await webView.EvaluateJavaScriptAsync(@"window.myAppBridge = { notify: function(msg) { window.location='myapp://notify?msg='+encodeURIComponent(JSON.stringify(msg)); } };");然后 JS 调用
window.myAppBridge.notify({action:'loaded'}) 即可触发 C# 处理
关键点:iOS 需在 Info.plist添加
NSAppTransportSecurity白名单(若用 http://);Android 需开启
Internet权限
调试与注意事项
WebView 交互容易因时机、平台差异或上下文丢失出问题,几个实用提醒:
JS 执行前务必确认webView.Source != null且已加载成功(可用
webView.CanGoBack辅助判断) Android 上
EvaluateJavaScriptAsync在 API 19+ 才完全支持,低于此版本会静默失败 iOS 默认禁用 JS 执行,需确认
webView.IsJavaScriptEnabled = true(MAUI 默认开启,但检查下更稳妥) 敏感操作(如支付回调)避免用 URL Scheme 传大量数据,改用 postMessage + 后端中转更安全
基本上就这些。不需要引入第三方库,MAUI 原生能力已足够支撑常见 H5 与原生交互场景。关键是选对时机、处理好平台差异、做好错误兜底。
