在C#中如何处理/转换从JavaScript获取的WebView2元素？

错误原因 #

你遇到的问题核心在于：JavaScript中的DOM元素无法直接序列化为C#的System.Windows.Forms.HtmlElement对象。两者分属不同运行环境（JS引擎/.NET CLR），HtmlElement是.NET封装的浏览器元素类，没有适配JSON反序列化的构造函数，且JS DOM对象的结构和HtmlElement完全不匹配——JSON只能传输可序列化的纯数据（字符串、数字、键值对等），无法传递复杂对象引用。

解决方案 #

根据需求，分两种场景处理：

场景1：仅需要获取元素的基础信息（如标签、属性、内容）

修改JavaScript代码，不要直接传递DOM元素，而是提取元素的可序列化信息后再发送：

document.addEventListener('click', function(e) {
    const target = e.target;
    // 提取需要的元素属性，转为纯JSON结构
    const elementData = {
        TagName: target.tagName,
        Id: target.id,
        ClassName: target.className,
        InnerHTML: target.innerHTML,
        // 提取所有属性为键值对
        Attributes: Array.from(target.attributes).reduce((attrs, attr) => {
            attrs[attr.name] = attr.value;
            return attrs;
        }, {})
    };
    window.chrome.webview.postMessage(elementData);
});

在C#端定义对应的数据类，用于反序列化：

public class ElementData
{
    public string TagName { get; set; }
    public string Id { get; set; }
    public string ClassName { get; set; }
    public string InnerHTML { get; set; }
    public Dictionary<string, string> Attributes { get; set; }
}

然后在WebMessageReceived方法中反序列化：

private void WebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
{
    var elementInfo = System.Text.Json.JsonSerializer.Deserialize<ElementData>(e.WebMessageAsJson);
    // 后续处理元素信息的逻辑
}

场景2：需要在C#端直接操作对应的DOM元素

如果需要对元素执行修改、获取更多属性等操作，不要传递元素数据，而是传递元素的唯一选择器，再通过WebView2的ExecuteScriptAsync方法在JS上下文操作元素：

JavaScript端发送选择器：

document.addEventListener('click', function(e) {
    const target = e.target;
    // 生成唯一选择器（优先用id，无id则用标签+类名）
    let selector = target.id ? `#${target.id}` : 
                  `${target.tagName.toLowerCase()}.${target.className.replace(/\s+/g, '.')}`;
    window.chrome.webview.postMessage({ ElementSelector: selector });
});

C#端定义接收类并操作元素：

public class ElementSelectorMessage
{
    public string ElementSelector { get; set; }
}

private async void WebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
{
    var message = System.Text.Json.JsonSerializer.Deserialize<ElementSelectorMessage>(e.WebMessageAsJson);
    // 示例：获取元素的文本内容
    var textContent = await webView2.ExecuteScriptAsync(
        `document.querySelector('${message.ElementSelector}').textContent`
    );
    // 示例：修改元素样式
    await webView2.ExecuteScriptAsync(
        `document.querySelector('${message.ElementSelector}').style.color = 'red'`
    );
}

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