Microsoft WebView2：如何通过JavaScript的showDirectoryPicker获取目录绝对路径

答案是肯定的。WebView2不同于普通浏览器，它允许宿主桌面应用与网页内容进行深度交互，能突破浏览器沙箱的限制实现这个需求。以下是两种常用的实现方案：

方案1：通过消息交互触发宿主端文件夹选择 #

利用WebView2的消息机制，网页向宿主发送请求，宿主调用系统文件夹选择器获取绝对路径后回传给网页：

宿主端（以C#为例） #

// 监听网页发来的目录选择请求
webView.CoreWebView2.WebMessageReceived += async (sender, args) =>
{
    var message = args.TryGetWebMessageAsString();
    if (message == "get-folder-path")
    {
        var pickerResult = await webView.CoreWebView2.ShowFolderPickerAsync();
        if (pickerResult != null)
        {
            // 将绝对路径发送回网页
            webView.CoreWebView2.PostWebMessageAsString(pickerResult.FolderPath);
        }
    }
};

网页端（JavaScript） #

// 向宿主发送目录选择请求
window.chrome.webview.postMessage("get-folder-path");

// 接收宿主返回的绝对路径
window.chrome.webview.addEventListener('message', (event) => {
    const absolutePath = event.data;
    console.log("选中的目录绝对路径：", absolutePath);
    // 这里添加你的业务逻辑
});

方案2：注册自定义宿主对象供网页直接调用 #

在宿主端注册一个可被网页调用的对象，网页通过该对象直接触发文件夹选择并获取路径：

宿主端（以C#为例） #

// 定义供网页调用的类
public class FolderHelper
{
    private readonly CoreWebView2 _webView;

    public FolderHelper(CoreWebView2 webView)
    {
        _webView = webView;
    }

    public async Task<string> PickFolderAsync()
    {
        var pickerResult = await _webView.ShowFolderPickerAsync();
        return pickerResult?.FolderPath;
    }
}

// 将对象注册到WebView2的脚本上下文
webView.CoreWebView2.AddHostObjectToScript("folderHelper", new FolderHelper(webView.CoreWebView2));

网页端（JavaScript） #

async function getSelectedFolderPath() {
    try {
        const absolutePath = await window.chrome.webview.hostObjects.sync.folderHelper.PickFolderAsync();
        console.log("目录绝对路径：", absolutePath);
    } catch (err) {
        console.error("选择目录失败：", err);
    }
}

// 调用方法
getSelectedFolderPath();

注意事项 #

• 所有文件系统操作都依赖宿主应用的权限，常规桌面应用默认具备目录访问权限
• 确保使用的WebView2运行时版本足够新，部分API（如ShowFolderPickerAsync）在旧版本中未提供
• 交互逻辑必须遵循WebView2的宿主-网页通信规范，不能直接在网页端绕过沙箱访问本地文件系统

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