winform如何调用js

WinForms 调用 JavaScript 的方法包括使用 WebBrowser 控件、利用 WebView2 控件、通过 COM 互操作、调用 JS 函数、传递参数等。其中使用 WebBrowser 控件是最常见的方法，它能够直接嵌入浏览器并执行 JavaScript 代码。

一、WebBrowser 控件的使用

WebBrowser 控件是 WinForms 提供的一个控件，可以嵌入一个 Internet Explorer 浏览器实例。通过这个控件，我们可以加载 HTML 并执行 JavaScript 代码。以下是使用 WebBrowser 控件调用 JavaScript 的步骤：

添加 WebBrowser 控件到窗体：在 Visual Studio 中，通过工具箱将 WebBrowser 控件拖放到你的窗体上。
加载 HTML 内容：可以通过 WebBrowser 控件的 DocumentText 属性来设置 HTML 内容。
调用 JavaScript 函数：通过 WebBrowser 控件的 Document.InvokeScript 方法来调用 JavaScript 函数。

private void Form1_Load(object sender, EventArgs e)
{
    string html = "<html><body><script type='text/javascript'>function showMessage() { alert('Hello from JavaScript!'); }</script></body></html>";
    webBrowser1.DocumentText = html;
}
private void button1_Click(object sender, EventArgs e)
{
    webBrowser1.Document.InvokeScript("showMessage");
}

二、使用 WebView2 控件

WebView2 控件是一个更现代的浏览器控件，它基于 Microsoft Edge（Chromium），能够提供更好的性能和兼容性。相比 WebBrowser 控件，WebView2 控件更适用于现代 Web 应用的嵌入。

安装 WebView2 控件：通过 NuGet 包管理器安装 Microsoft.Web.WebView2。
添加 WebView2 控件到窗体：在设计器中添加 WebView2 控件。
加载 HTML 内容并调用 JavaScript：使用 WebView2 控件的 CoreWebView2.ExecuteScriptAsync 方法来执行 JavaScript 代码。

private async void Form1_Load(object sender, EventArgs e)
{
    await webView21.EnsureCoreWebView2Async(null);
    webView21.CoreWebView2.NavigateToString("<html><body><script type='text/javascript'>function showMessage() { alert('Hello from JavaScript!'); }</script></body></html>");
}
private async void button1_Click(object sender, EventArgs e)
{
    await webView21.CoreWebView2.ExecuteScriptAsync("showMessage()");
}

三、通过 COM 互操作调用 JavaScript

在某些情况下，可能需要通过 COM 互操作来调用 JavaScript。通过建立与浏览器控件的 COM 互操作，可以更灵活地与 JavaScript 进行交互。

获取文档对象：通过 WebBrowser 控件的 Document 属性获取 HTML 文档对象。
调用 JavaScript：通过文档对象调用 JavaScript 函数。

private void button1_Click(object sender, EventArgs e)
{
    var htmlDocument = webBrowser1.Document;
    var script = htmlDocument.InvokeScript("eval", new object[] { "showMessage()" });
}

四、调用 JavaScript 函数并传递参数

有时我们需要调用带有参数的 JavaScript 函数，WebBrowser 和 WebView2 控件都支持这种操作。通过 InvokeScript 或 ExecuteScriptAsync 方法，可以将参数传递给 JavaScript 函数。

// 在 WebBrowser 控件中
private void button1_Click(object sender, EventArgs e)
{
    webBrowser1.Document.InvokeScript("showMessage", new object[] { "Hello with Parameter" });
}
// 在 WebView2 控件中
private async void button1_Click(object sender, EventArgs e)
{
    await webView21.CoreWebView2.ExecuteScriptAsync("showMessage('Hello with Parameter')");
}

五、使用 JavaScript 与 WinForms 互操作

除了从 WinForms 调用 JavaScript，我们还可以从 JavaScript 调用 WinForms 方法。通过注册对象到 JavaScript 环境中，可以实现双向通信。

1. WebBrowser 控件中的互操作

// C# 代码
public class ScriptManager
{
    public void ShowMessage(string message)
    {
        MessageBox.Show(message);
    }
}
private void Form1_Load(object sender, EventArgs e)
{
    string html = "<html><body><script type='text/javascript'>function callCSharp() { window.external.ShowMessage('Hello from JS!'); }</script></body></html>";
    webBrowser1.ObjectForScripting = new ScriptManager();
    webBrowser1.DocumentText = html;
}
private void button1_Click(object sender, EventArgs e)
{
    webBrowser1.Document.InvokeScript("callCSharp");
}

2. WebView2 控件中的互操作

// C# 代码
public class ScriptManager
{
    public void ShowMessage(string message)
    {
        MessageBox.Show(message);
    }
}
private async void Form1_Load(object sender, EventArgs e)
{
    await webView21.EnsureCoreWebView2Async(null);
    webView21.CoreWebView2.NavigateToString("<html><body><script type='text/javascript'>function callCSharp() { window.chrome.webview.postMessage('Hello from JS!'); }</script></body></html>");
    webView21.WebMessageReceived += WebView21_WebMessageReceived;
}
private void WebView21_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
{
    string message = e.TryGetWebMessageAsString();
    MessageBox.Show(message);
}
private async void button1_Click(object sender, EventArgs e)
{
    await webView21.CoreWebView2.ExecuteScriptAsync("callCSharp()");
}

六、综合应用与最佳实践

在实际应用中，选择合适的控件和方法非常重要。WebBrowser 控件适用于简单的 HTML 和 JavaScript 执行，而WebView2 控件更适合现代化的 Web 应用嵌入。无论选择哪种控件，都应注意以下几点：

安全性：确保加载的 HTML 和执行的 JavaScript 安全，避免 XSS 攻击。
性能：WebView2 控件性能更优，适合复杂的 Web 应用。
兼容性：WebView2 控件基于 Chromium，兼容性更好，适用于现代 Web 技术。

通过本文介绍的方法和实践，您可以在 WinForms 应用中灵活调用 JavaScript，提升应用的交互性和用户体验。如果需要管理和协作多个开发项目，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们能极大地提升团队的协作效率和项目管理能力。