Winform中WebView2通过ExecuteScriptAsync向HTML表格追加元素问题

1. 基础运行时机校验 #

• 必须确保ExecuteScriptAsync调用时，WebView2已经完成页面初始化加载，要在CoreWebView2.NavigationCompleted事件触发后再执行脚本调用，提前调用会因为DOM未渲染导致操作失效。
• 检查页面中目标表格的ID是否和JS选择器完全匹配，大小写敏感，拼写错误会导致无法选中DOM节点。

2. 字符串转义问题排查 #

• 从本地txt读取的HTML内容包含双引号、换行符、反斜杠等特殊字符时，必须做JS字符串转义处理，否则传入ExecuteScriptAsync的脚本会出现语法错误直接中断执行。C#侧可以用System.Text.Json.JsonSerializer.Serialize方法对HTML字符串做序列化，自动完成转义，避免手动拼接的语法错误。
• 示例正确的C#调用写法：

// 读取本地HTML行内容
string htmlContent = File.ReadAllText("你的txt文件路径");
// 自动转义为合法JS字符串
string escapedHtml = JsonSerializer.Serialize(htmlContent);
// 拼接执行脚本
string script = $"appendTableRow({escapedHtml});";
// 执行
await webView21.CoreWebView2.ExecuteScriptAsync(script);

3. JS侧函数校验 #

• 确认页面中的追加函数逻辑正确，推荐直接用insertAdjacentHTML的方式追加，比手动操作DOM更稳定：

function appendTableRow(html) {
  // 替换为你的表格ID，注意如果是tbody要选到tbody节点
  const tableBody = document.getElementById('targetTableBody');
  if (!tableBody) return;
  tableBody.insertAdjacentHTML('beforeend', html);
}

• 可以先在WebView2的开发者工具控制台中手动调用追加函数，传入测试HTML内容，确认JS侧逻辑本身没有问题。

4. 执行结果校验 #

• 可以接收ExecuteScriptAsync的返回值，查看执行结果和报错信息：

var result = await webView21.CoreWebView2.ExecuteScriptAsync(script);
// 打印result查看返回值，如果有JS报错会在result中体现
Debug.WriteLine(result);

• 打开WebView2的开发者工具（运行时右键页面选择“检查”），切换到控制台标签，查看是否有JS语法错误、DOM未找到等报错信息。

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