如何用Microsoft Edge替代InternetExplorer实现URL打开与页面元素赋值？

问题背景 #

原有应用通过IE组件打开指定URL，并为页面特定输入框赋值，代码运行正常。但部分客户的高端网站不再支持IE，需替换为基于Edge的WebView2组件，现有尝试代码未能实现原有功能。

原有IE实现代码 #

Object o = null;
Object URL = url;            
mshtml.HTMLDocument doc;
InternetExplorer ie = new InternetExplorer();
ie.Visible = true;
ie.Navigate2(ref URL, ref o, ref o, ref o, ref o);

while (ie.ReadyState != SHDocVw.tagREADYSTATE.READYSTATE_COMPLETE)
{
    Application.DoEvents();
    System.Threading.Thread.Sleep(50);
}
doc = (mshtml.HTMLDocument)ie.Document;
mshtml.HTMLInputElement el = (mshtml.HTMLInputElement)doc.all.item("credentials-email", null);
el.value = un;
el = (mshtml.HTMLInputElement)doc.all.item("credentials-password", null);
el.value = ps;

尝试的WebView2代码（未实现功能） #

Object o = null;
Object URL = url;
mshtml.HTMLDocument doc;
Microsoft.Web.WebView2.WinForms.WebView2 webView = new Microsoft.Web.WebView2.WinForms.WebView2();
webView.CreationProperties = new Microsoft.Web.WebView2.WinForms.CoreWebView2CreationProperties();
webView.CreationProperties.UserDataFolder = userDataFolder;
webView.CreationProperties.Args = new string[] { "--disable-web-security", "--disable-features=CrossSiteDocumentBlockingIfIsolating" };
webView.CreationProperties.StartInWebView = true;
webView.CreationProperties.BrowserExecutableFolder = @"C:\Program Files (x86)\Microsoft\Edge\Application";
webView.CreationProperties.BrowserExecutableArguments = "--disable-gpu";
webView.Dock = DockStyle.Fill;
this.Controls.Add(webView);
webView.CoreWebView2InitializationCompleted += async (e, url) =>
{
    await webView.CoreWebView2.AddWebResourceRequestedFilter("*", Microsoft.Edge.WebView2.Core.CoreWebView2WebResourceContext.All);
    await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(@"document.addEventListener('DOMContentLoaded', function() { console.log('DOMContentLoaded'); });");
    await webView.CoreWebView2.AddScriptToExecuteOnDocumentCompletedAsync(@"console.log('DocumentCompleted');");
    webView.CoreWebView2.Navigate(url);
};

正确的WebView2实现方案 #

WebView2操作DOM的核心是通过ExecuteScriptAsync执行JavaScript代码，而非直接引用mshtml对象。以下是修正后的完整实现：

关键改进点 #

• 修正CoreWebView2InitializationCompleted事件的参数错误
• 监听NavigationCompleted事件确保页面完全加载
• 使用JavaScript脚本直接操作页面元素赋值

完整代码示例 #

using Microsoft.Web.WebView2.WinForms;
using Microsoft.Web.WebView2.Core;

// 初始化WebView2控件
WebView2 webView = new WebView2();
webView.CreationProperties = new CoreWebView2CreationProperties
{
    UserDataFolder = userDataFolder,
    BrowserExecutableFolder = @"C:\Program Files (x86)\Microsoft\Edge\Application",
    AdditionalBrowserArguments = "--disable-web-security --disable-features=CrossSiteDocumentBlockingIfIsolating --disable-gpu"
};
webView.Dock = DockStyle.Fill;
this.Controls.Add(webView);

// 初始化完成后导航并设置加载完成后的操作
webView.CoreWebView2InitializationCompleted += async (sender, e) =>
{
    if (e.IsSuccess)
    {
        // 导航到目标URL
        await webView.CoreWebView2.NavigateAsync(url);
        
        // 监听页面加载完成事件
        webView.CoreWebView2.NavigationCompleted += async (navSender, navE) =>
        {
            if (navE.IsSuccess)
            {
                // 执行JavaScript为输入框赋值（注意：若含特殊字符需转义）
                await webView.CoreWebView2.ExecuteScriptAsync($"document.getElementById('credentials-email').value = '{EscapeJsString(un)}';");
                await webView.CoreWebView2.ExecuteScriptAsync($"document.getElementById('credentials-password').value = '{EscapeJsString(ps)}';");
            }
        };
    }
};

// 初始化CoreWebView2
await webView.EnsureCoreWebView2Async(null);

// 辅助方法：转义JavaScript字符串中的特殊字符
private string EscapeJsString(string input)
{
    return input.Replace("'", @"\'").Replace("\"", @"\"").Replace("\n", @"\n").Replace("\r", @"\r").Replace("\t", @"\t");
}

注意事项 #

• 若用户名或密码包含单引号、反斜杠等特殊字符，必须用辅助方法转义，避免JavaScript语法错误
• 若目标页面元素使用name属性而非id，可改用document.getElementsByName('credentials-email')[0].value = ...
• 无需额外添加AddScriptToExecuteOnDocumentCreatedAsync或AddScriptToExecuteOnDocumentCompletedAsync，除非有其他前置脚本需求

内容的提问来源于stack exchange，提问作者the-a-monir