.NET MAUI 中 WebView 实现 JS 与 C# 交互:C# 调 JS 用 EvaluateJavaScriptAsync(需 NavigationCompleted 后执行);JS 调 C# 在 MAUI 8+ 用 RegisterScriptMessageHandler,跨平台推荐 URL Scheme 拦截或注入 JS 桥接对象。

在 .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,接收 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 与原生交互场景。关键是选对时机、处理好平台差异、做好错误兜底。










