WebView2中ExecuteScriptAsync返回HTMLCollection异常问题咨询

核心机制说明 #

ExecuteScriptAsync的内置JSON序列化能力，仅支持处理JS原生的普通值、对象、数组类型，无法直接序列化浏览器原生DOM宿主对象

• document.getElementsByTagName('button')返回的HTMLCollection是浏览器实现的宿主类数组对象，不属于JS原生Array实例
• 序列化逻辑检测到该对象不是可识别的普通JS结构时，只会遍历其自身可枚举的数字索引属性，既不会按照数组格式输出，也无法读取索引对应HTMLButtonElement DOM对象的内部属性
• 最终序列化结果就会退化为以数字为键、值为空对象的普通结构，也就是实际收到的{"0":{},"1":{}}

修正方案 #

需要在JS脚本执行阶段，先将DOM相关数据转换为完全可序列化的原生JS结构，再返回给C#端，示例代码如下：

var script = @"Array.from(document.getElementsByTagName('button')).map(btn => {
  return {
    text: btn.textContent.trim(),
    id: btn.id,
    disabled: btn.disabled
  }
});";
var jsonResult = await webView21.ExecuteScriptAsync(script);

• 通过Array.from将HTMLCollection转换为JS原生数组
• 遍历每个按钮DOM元素，提取业务需要的属性构造普通键值对对象，这类结构会被正常序列化，可得到符合预期的结构化数据

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