如何在MAUI WebView中实现JS调用C#方法及反向调用

一、JavaScript调用C#代码 #

有两种常用实现方式，可根据场景选择：

方式1：通过消息传递实现（跨平台通用） #

这种方式通过JS发送消息，C#监听并处理，适合简单的命令交互。

• C#端：监听WebView的MessageReceived事件，解析消息并执行对应逻辑

// 在页面构造函数或初始化方法中添加事件监听
MyWebView.MessageReceived += (sender, e) =>
{
    var messageContent = e.Message;
    
    // 按约定解析消息，比如通过前缀区分操作
    if (messageContent.Equals("requestAppVersion", StringComparison.OrdinalIgnoreCase))
    {
        // 获取版本后，调用JS返回结果
        _ = MyWebView.EvaluateJavaScriptAsync($"onVersionReceived('{AppInfo.VersionString}')");
    }
    else if (messageContent.StartsWith("showToast:", StringComparison.OrdinalIgnoreCase))
    {
        var toastMsg = messageContent.Substring(9);
        // UI操作需切换到主线程
        MainThread.BeginInvokeOnMainThread(() =>
        {
            Toast.Make(toastMsg).Show();
        });
    }
};

• JS端：通过window.chrome.webview.postMessage发送消息，并定义接收返回结果的函数

// 请求应用版本
window.chrome.webview.postMessage('requestAppVersion');
// 请求显示Toast
window.chrome.webview.postMessage('showToast:Hello from JavaScript!');

// 接收C#返回的版本信息
function onVersionReceived(version) {
    console.log('当前应用版本：', version);
}

方式2：直接调用注册的C#方法 #

这种方式允许JS直接调用C#中标记的方法，适合复杂的逻辑交互。

• C#端：创建带有[JSInvokable]特性的类，并在WebView加载完成后注册到JS上下文

// 定义供JS调用的类
public class WebBridge
{
    [JSInvokable] // 标记该方法可被JS调用
    public string GetAppVersion()
    {
        return AppInfo.VersionString;
    }

    [JSInvokable]
    public void ShowToast(string message)
    {
        MainThread.BeginInvokeOnMainThread(() =>
        {
            Toast.Make(message).Show();
        });
    }
}

// 在WebView导航完成后注册桥接对象
MyWebView.Navigated += async (sender, e) =>
{
    // 替换为你的MAUI项目程序集名称（可在项目属性中查看）
    string assemblyName = "YourMauiAppAssemblyName";
    await MyWebView.EvaluateJavaScriptAsync($@"
        window.webBridge = {{
            getAppVersion: () => DotNet.invokeMethodAsync('{assemblyName}', 'GetAppVersion'),
            showToast: (msg) => DotNet.invokeMethodAsync('{assemblyName}', 'ShowToast', msg)
        }};
    ");
};

• JS端：直接调用注册的对象方法

// 获取应用版本
window.webBridge.getAppVersion().then(version => {
    console.log('应用版本：', version);
});

// 调用Toast方法
window.webBridge.showToast('来自JS的提示');

二、C#调用JavaScript代码 #

MAUI WebView提供EvaluateJavaScriptAsync方法，可直接执行JS代码并获取返回值。

1. 执行无返回值的JS代码 #

// 弹出提示框
await MyWebView.EvaluateJavaScriptAsync("alert('Hello from C#!')");

2. 执行有返回值的JS代码 #

// 获取页面标题
var pageTitle = await MyWebView.EvaluateJavaScriptAsync("document.title");
Console.WriteLine("当前页面标题：" + pageTitle);

3. 调用JS自定义函数 #

假设JS中有如下函数：

function calculateSum(a, b) {
    return a + b;
}

C#中调用：

int numA = 10, numB = 20;
var sumResult = await MyWebView.EvaluateJavaScriptAsync($"calculateSum({numA}, {numB})");
Console.WriteLine("计算结果：" + sumResult);

传递字符串参数时需注意引号：

var greetMsg = "你好，C#调用JS";
await MyWebView.EvaluateJavaScriptAsync($"showGreeting('{greetMsg}')");

注意事项 #

• 务必在WebView加载完成（Navigated事件触发后）再调用JS代码，避免因页面未加载完成导致报错。
• C#端涉及UI的操作，必须通过MainThread.BeginInvokeOnMainThread切换到主线程执行。

内容的提问来源于stack exchange，提问作者YaRmgl