C# MAUI怎么调用JavaScript代码 MAUI与WebView交互_技术教程

.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/Win
dows）

为统一行为，建议封装一个轻量桥接层，基于 URL Scheme 拦截或注入 JS 接口。

方法一（推荐）：重写 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 权限