如何用C#通过WebView2执行脚本展开HTML的Product Details标签

核心思路 #

要展开Product Details这类HTML标签，本质是通过WebView2执行JavaScript代码，模拟用户点击操作或者直接修改元素的显示状态，让原本折叠的内容展开。

具体实现步骤 #

1. 确保WebView2完成初始化 #

执行脚本前必须等待WebView2的CoreWebView2对象初始化完成，否则会触发异常。可以通过异步方法或事件监听实现：

// 异步初始化WebView2
await webView2.EnsureCoreWebView2Async(null);

2. 编写展开元素的JavaScript脚本 #

根据页面HTML结构的不同，有两种常用写法：

场景1：模拟点击展开按钮

如果Product Details是通过点击特定按钮（比如带ID/类名的<button>、<a>标签）展开的，直接模拟点击即可：

// 假设展开按钮的ID为"productDetailsToggle"
document.getElementById('productDetailsToggle').click();

如果按钮用类名标识，可通过选择器定位：

// 选择第一个类名为"details-toggle-btn"的元素并点击
document.querySelector('.details-toggle-btn').click();

场景2：直接修改元素显示状态

如果内容是通过CSS属性（如display、visibility）或类名控制折叠的，直接修改对应属性/类名：

// 假设展开内容的容器ID为"productDetailsContent"，设置为显示
document.getElementById('productDetailsContent').style.display = 'block';
// 或者移除隐藏类（比如页面用"hidden"类控制隐藏）
document.getElementById('productDetailsContent').classList.remove('hidden');

3. 在C#中执行脚本 #

使用CoreWebView2.ExecuteScriptAsync()方法运行上述JavaScript代码：

// 示例：执行点击按钮的脚本
string expandScript = "document.getElementById('productDetailsToggle').click();";
await webView2.CoreWebView2.ExecuteScriptAsync(expandScript);

4. 选择合适的执行时机 #

如果需要页面加载完成后自动展开，可监听NavigationCompleted事件，在页面加载成功后执行脚本：

webView2.CoreWebView2.NavigationCompleted += async (sender, e) =>
{
    if (e.IsSuccess)
    {
        string expandScript = "document.getElementById('productDetailsToggle').click();";
        await webView2.CoreWebView2.ExecuteScriptAsync(expandScript);
    }
};

注意事项 #

• 要准确获取目标元素的选择器（ID、类名等），可以通过浏览器开发者工具查看元素属性，确保脚本能精准定位。
• 如果页面包含动态加载的内容（如AJAX渲染），需要等待目标元素完全加载后再执行脚本，可通过设置延迟或监听DOM变化实现。

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