使用ExecuteScriptAsync时for循环仅执行一次的问题排查

环境为C# + WinForms，使用WebView2控件加载网页，通过创建下载元素实现图片下载。调试时将for循环设为2次迭代（i从0到1），但仅能成功下载1张图片，循环最多执行一次。

原问题代码 #

async void multiplePics (int column) => await webView2.ExecuteScriptAsync("" +
                "var downloadElement=document.createElement('a'); " +
                "downloadElement.setAttribute('download',''); " +
                "downloadElement.href= document.getElementsByClassName('slick-slide slick-cloned')[" +  column + "].getElementsByClassName('item')[0].getAttribute('href'); " +
                "document.body.appendChild(downloadElement); " +
                "downloadElement.click();" +
                "downloadElement.remove();  " +
                "");

for (int i = 0; i <= 1; i++)
{
    Debug.WriteLine(i);
    multiplePics(i);
}

尝试过的写法 #

写法1 #

async private void button5_Click(object sender, EventArgs e)
{
    void multiplePics(int column) {
        //webView2.ExecuteScriptAsync( "javascript");
    }

    for (int i = 0; i <= 1; i++)
    {await multiplePics(i);}
}

写法2 #

private void button5_Click(object sender, EventArgs e)
{
    Task<string> multiplePics(int column) {
        //return webView2.ExecuteScriptAsync( "javascript");
    }

    Task.Run( ()=>{ return multiplePics(0);} );
    Task.Run( ()=>{ return multiplePics(1);} );
//tried GetAwaiter() along with GetResult() also
}

写法3 #

private async void button5_Click(object sender, EventArgs e)
{
    //tried public & private async Task multiplePics with no success
    //async Task multiplePics had no errors but had the same result
    private async Task multiplePics(int column) => 
            await webView2.ExecuteScriptAsync("" +
             "var downloadElement=document.createElement('a'); " +
             "downloadElement.setAttribute('download',''); " +
             "downloadElement.href= document.getElementsByClassName('slick-slide slick-cloned')[" + column + "].getElementsByClassName('item')[0].getAttribute('href'); " +
             "document.body.appendChild(downloadElement); " +
             "downloadElement.click();" +
             "downloadElement.remove();  " +
             "");

    for (int i = 0; i <= 3; i++) 
    {
        await multiplePics(i);
    }
}

问题原因与解决方法 #

核心问题分析 #

1. 异步方法调用不规范：原代码用async void定义multiplePics，这类方法无法被等待，调用后立即返回，导致两次下载操作并发执行，干扰WebView2的脚本执行队列，甚至引发未捕获异常。
2. DOM元素操作时序错误：创建<a>元素后立即点击并移除，浏览器可能还未处理完下载请求就丢失了元素引用，导致后续下载请求失效。
3. 未正确等待脚本执行完成：循环中直接调用异步方法而不等待，导致多个脚本请求堆积或冲突。

修正后的代码示例 #

// 将方法改为async Task类型，支持等待
private async Task multiplePics(int column)
{
    // 使用字符串插值简化脚本拼接，增加延迟移除逻辑
    string downloadScript = $@"
        var downloadElement = document.createElement('a');
        downloadElement.setAttribute('download', '');
        // 确保目标元素存在，避免JS报错
        var slideElement = document.getElementsByClassName('slick-slide slick-cloned')[{column}];
        if (slideElement) {{
            var itemElement = slideElement.getElementsByClassName('item')[0];
            if (itemElement) {{
                downloadElement.href = itemElement.getAttribute('href');
                document.body.appendChild(downloadElement);
                downloadElement.click();
                // 延迟100ms移除元素，确保浏览器接收下载请求
                setTimeout(() => {{
                    downloadElement.remove();
                }}, 100);
            }}
        }}
    ";
    await webView2.ExecuteScriptAsync(downloadScript);
}

// 在事件处理方法中正确等待每个下载任务完成
private async void button5_Click(object sender, EventArgs e)
{
    for (int i = 0; i <= 1; i++)
    {
        Debug.WriteLine($"开始下载第{i}张图片");
        await multiplePics(i);
        // 可选：两次下载之间增加200ms延迟，避免浏览器负载过高
        await Task.Delay(200);
    }
}

额外检查点 #

• 确认document.getElementsByClassName('slick-slide slick-cloned')返回的元素数量大于等于循环的最大索引，避免JavaScript报错中断执行。
• 可以添加异常捕获，排查脚本执行错误：

  try
  {
      await webView2.ExecuteScriptAsync(downloadScript);
  }
  catch (Exception ex)
  {
      Debug.WriteLine($"脚本执行失败: {ex.Message}");
  }
  

内容的提问来源于stack exchange，提问作者Mr. Dawit