教你在.Net8.0的WinForm中使用WebView2,实现C#和JavaScript的实时双向互操作

最新推荐文章于 2025-03-09 12:25:29 发布
最新推荐文章于 2025-03-09 12:25:29 发布
阅读量3.1k 收藏 9
点赞数 16
文章标签： .net c# javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web13595609705/article/details/144423587
版权

在这里插入图片描述

1. 前言

随着 Web 技术的发展，使用网页内容（HTML、JavaScript、CSS 等）作为桌面应用程序的一部分变得越来越常见。在 C# WinForm 中，Microsoft 提供的 WebView2 控件让我们可以轻松地嵌入 Chromium 浏览器，并实现 C# 与 JavaScript 的互操作。本文将详细介绍如何在 WinForm 项目中集成 WebView2 控件，并实现 C# 和 JavaScript 的双向调用。

2. 前置准备

  1. 安装 WebView2 Runtime（Windows 11 默认包含）。
  2. 在项目中添加 WebView2 控件。
  3. 安装 Microsoft.Web.WebView2 NuGet 包，以支持 WebView2 控件的功能。

3. 初始化 WebView2 控件

在 WinForm 中添加 WebView2 控件并初始化，确保其加载本地或远程的 HTML 文件。

using Microsoft.Web.WebView2.Core;
using System;
using System.Windows.Forms;

namespace WebView2InteropDemo
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeAsync();
        }

        private async void InitializeAsync()
        {
            await webView21.EnsureCoreWebView2Async(null);
           string htmlFilePath = System.IO.Path.Combine(AppContext.BaseDirectory, "index.html");
webView21.Source = new Uri($"file:///{htmlFilePath.Replace("\", "/")}");
        }
    }
}

4. JavaScript 调用 C# 方法

实现 JavaScript 调用 C# 的方法需要以下几个步骤：

  1. 注册一个 C# 对象，使得 JavaScript 可以访问。
  2. 在 C# 中实现可以调用的公开方法。
  3. 在 JavaScript 中通过 window.chrome.webview.postMessage 向 C# 发送消息。
C# 端代码

在 WebView2 初始化完成后，可以向 JavaScript 注入一个 C# 对象，提供供调用的方法：

// C# 代码：注册可供 JavaScript 调用的对象
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        InitializeAsync();
    }

    private async void InitializeAsync()
    {
        await webView21.EnsureCoreWebView2Async(null);
        webView21.CoreWebView2.WebMessageReceived += WebView2_WebMessageReceived;
       string htmlFilePath = System.IO.Path.Combine(AppContext.BaseDirectory, "index.html");
webView21.Source = new Uri($"file:///{htmlFilePath.Replace("\", "/")}");
    }

    private void WebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
    {
        string message = e.WebMessageAsJson; // 获取来自 JavaScript 的消息
        MessageBox.Show("Received message from JavaScript: " + message);
    }

    // 向 JavaScript 发送消息的 C# 方法
    public void SendMessageToJavaScript(string message)
    {
        webView21.CoreWebView2.PostWebMessageAsString(message);
    }
}
JavaScript 端代码

在 HTML 文件中，通过 window.chrome.webview.postMessage 向 C# 发送消息。首先确保页面加载后，C# 已成功注册监听事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebView2 JS to C# Interop</title>
</head>
<body>
    <h1>JavaScript to C# Interop</h1>
    <button onclick="sendMessageToCSharp()">Send Message to C#</button>

    <script>
        function sendMessageToCSharp() {
            // 通过 WebView2 的 postMessage 将消息发送给 C#
            window.chrome.webview.postMessage("Hello from JavaScript!");
        }
    </script>
</body>
</html>

在此示例中，点击按钮将调用 JavaScript 中的 sendMessageToCSharp() 函数，该函数通过 window.chrome.webview.postMessage 向 C# 发送消息，C# 收到消息后在弹窗中显示接收到的内容。

5. C# 调用 JavaScript 方法

在某些情况下，我们希望从 C# 向 JavaScript 发送消息或调用 JavaScript 函数。可以使用 ExecuteScriptAsync 方法实现此功能。

C# 端代码

在 C# 端调用 ExecuteScriptAsync 来执行 JavaScript 代码：

// C# 代码：向 JavaScript 发送消息
public void CallJavaScriptFunction()
{
    string script = "displayMessageFromCSharp('Hello from C#');";
    webView21.CoreWebView2.ExecuteScriptAsync(script);
}
JavaScript 端代码

在 JavaScript 中实现一个函数，用于处理 C# 传递的数据：

<script>
    function displayMessageFromCSharp(message) {
        alert("Message from C#: " + message);
    }
</script>

当 C# 调用 CallJavaScriptFunction 方法时，将执行 JavaScript 函数 displayMessageFromCSharp，并弹出一个消息框显示从 C# 传递的消息。

6. 交互过程总结

  1. JavaScript 调用 C#：
  • 通过使用 window.chrome.webview.postMessage 将消息发送到 C#。
  • C# 使用 WebMessageReceived 事件接收消息，并在需要时执行相应操作。
  1. C# 调用 JavaScript：
  • 通过使用 ExecuteScriptAsync 方法执行 JavaScript 代码。
  • JavaScript 端实现处理函数，接受从 C# 传递的消息或参数，并做出响应。

7.完整项目构建汇总

1、新增项目WebView2InteropDemo，并且引入依赖库
引入依赖库

根据操作系统版本，引入WebView2.Runtime.X64
在这里插入图片描述

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net8.0-windows</TargetFramework>
    <Nullable>disable</Nullable>
    <UseWindowsForms>true</UseWindowsForms>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="WebView2.Runtime.X64" Version="130.0.2849.80" />
  </ItemGroup>

  <ItemGroup>
    <None Update="index.html">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </None>
  </ItemGroup>

</Project>
2、新增Form1窗体，构建布局

在这里插入图片描述

Form1.Designer.cs代码
namespace WebView2InteropDemo
{
    partial class Form1
    {
        /// <summary>
        ///  Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        ///  Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        ///  Required method for Designer support - do not modify
        ///  the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            webView21 = new Microsoft.Web.WebView2.WinForms.WebView2();
            btnCallJsFunc = new Button();
            ((System.ComponentModel.ISupportInitialize)webView21).BeginInit();
            SuspendLayout();
            // 
            // webView21
            // 
            webView21.AllowExternalDrop = true;
            webView21.CreationProperties = null;
            webView21.DefaultBackgroundColor = Color.White;
            webView21.Dock = DockStyle.Fill;
            webView21.Location = new Point(0, 34);
            webView21.Name = "webView21";
            webView21.Size = new Size(800, 416);
            webView21.TabIndex = 0;
            webView21.ZoomFactor = 1D;
            // 
            // btnCallJsFunc
            // 
            btnCallJsFunc.Dock = DockStyle.Top;
            btnCallJsFunc.Location = new Point(0, 0);
            btnCallJsFunc.Name = "btnCallJsFunc";
            btnCallJsFunc.Size = new Size(800, 34);
            btnCallJsFunc.TabIndex = 1;
            btnCallJsFunc.Text = "Call Js Func";
            btnCallJsFunc.UseVisualStyleBackColor = true;
            btnCallJsFunc.Click += btnCallJsFunc_Click;
            // 
            // Form1
            // 
            AutoScaleDimensions = new SizeF(11F, 24F);
            AutoScaleMode = AutoScaleMode.Font;
            ClientSize = new Size(800, 450);
            Controls.Add(webView21);
            Controls.Add(btnCallJsFunc);
            Name = "Form1";
            StartPosition = FormStartPosition.CenterScreen;
            Text = "Form1";
            ((System.ComponentModel.ISupportInitialize)webView21).EndInit();
            ResumeLayout(false);
        }

        #endregion

        private Microsoft.Web.WebView2.WinForms.WebView2 webView21;
        private Button btnCallJsFunc;
    }
}
Form1.cs
using Microsoft.Web.WebView2.Core;

namespace WebView2InteropDemo
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeAsync();
        }

        private async void InitializeAsync()
        {
            await webView21.EnsureCoreWebView2Async(null);
            webView21.CoreWebView2.WebMessageReceived += WebView2_WebMessageReceived;
            string htmlFilePath = System.IO.Path.Combine(AppContext.BaseDirectory, "index.html");
            webView21.Source = new Uri($"file:///{htmlFilePath.Replace("\", "/")}");
        }

        private void WebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
        {
            string message = e.WebMessageAsJson;
            MessageBox.Show("Received message from JavaScript: " + message);
        }

        public void SendMessageToJavaScript(string message)
        {
            webView21.CoreWebView2.PostWebMessageAsString(message);
        }

        public void CallJavaScriptFunction()
        {
            string script = "displayMessageFromCSharp('Hello from C#');";
            webView21.CoreWebView2.ExecuteScriptAsync(script);
        }

        private void btnCallJsFunc_Click(object sender, EventArgs e)
        {
            CallJavaScriptFunction();
        }
    }
}
3、编写html内嵌web网页代码

在这里插入图片描述

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebView2 JS to C# Interop</title>
</head>
<body>
    <h1>JavaScript to C# Interop</h1>
    <button onclick="sendMessageToCSharp()">Send Message to C#</button>

    <script>
        function sendMessageToCSharp() {
            window.chrome.webview.postMessage("Hello from JavaScript!");
        }

        function displayMessageFromCSharp(message) {
            alert("Message from C#: " + message);
        }
    </script>
</body>
</html>
4、执行结果
JS函数调C#函数代码

在这里插入图片描述

C#函数调用JS函数

在这里插入图片描述

8.总结

WebView2 的互操作功能使我们能够将现代 Web 技术无缝集成到 WinForm 应用程序中。通过本文介绍的方法，可以实现 JavaScript 和 C# 的双向调用，使得 WinForm 应用程序可以有效地利用 Web 内容和桌面功能，满足更复杂的业务需求。

四.Winform使用Webview2加载本地HTML页面并互相通信
东明之羞的博客
01-21 3870
Winform使用Webview2加载本地HTML页面，并互相通信 。涉及到的属性方法有：CoreWebView2，ExecuteScriptAsync，WebMessageReceived，CoreWebView2InitializationCompleted。
C#中WebView2调用与交互实现
weixin_45114627的博客
07-30 4347
此控件实际上是 [WebView2 COM API] （https://aka.ms/webview2） 的包装器。可以通过访问 Microsoft.Web.WebView2.Wpf.WebView2.CoreWebView2 属性来直接访问基础 ICoreWebView2 接口及其所有功能。一些最常见的 COM 功能也可以通过控件上的包装器方法/属性/事件直接访问。创建时，控件的 Microsoft.Web.WebView2.Wpf.WebView2.CoreWebView2 属性将为 null。
WinForm下WebView2实现JS与C#交互Demo
03-02
不仅winform方法能调用js方法，同时js方法能调用winform中的C#方法
最后一个版本支持Windows 7 系统的WebView2使用指南（含下载）
sensor_WU 博客
03-09 1492
支持最好的就是Windows11 或者windows 10。但是对于windows 7 新版本就不支持了。
WinFormWebView2-自用-个性化浏览器-桌面程序开发-程序源码
08-15
这是集成了WebView2的内核浏览器桌面程序，类似Edge，Chrome浏览器，使用VisualStudio2019开发工具编写来的，项目正常编译可套，请放心下载。 可以看配套的指导文章：https://blog.csdn.net/zs1028/article/details/132298695
C#之WebView2实现cookie登录，免登操作。
csdn2990的博客
10-31 1785
我实现的方式有三种，一种是通过JS注入cookie的方式，第二种是通过读取本地化存储的用户数据实现，第三种是发送请求的时候，对请求头进行修改。
.net core 的 winform 的 浏览器控件 WebView2
代码笔记
06-28 1666
请注意，WebView2控件需要有效的Internet连接来下载Chromium相关的资源，并且在某些系统上可能需要额外的配置步骤。在实际部署应用程序之前，请确保检查WebView2的系统要求和部署注意事项。在.NET Core WinForms应用程序中，没有直接的“浏览器控件”，因为WinForms不支持像WebBrowser控件那样的功能。控件，它是一个基于Chromium的浏览器内核，可以在WinForms应用程序中嵌入Web内容。，你需要在项目中安装Microsoft.Web.WebView2。
Winform使用Webview2(Edge浏览器核心)实现精美教程目录
东明之羞的博客
01-21 2207
使用 Microsoft Edge WebView2 控件，可以使用基于Chromium的 Microsoft Edge 作为呈现引擎，在应用程序中托管 Web 内容。通过本地HTML作为界面实现精美软件。
WebView2中C#和JavaScript代码互操作
热门推荐
Yuri's FarmLand
04-19 1万+
C#调用或者执行前端的JavaScript 1.需要创建一个ScriptHost，并注册到WebView2中 [ClassInterface(ClassInterfaceType.AutoDual)] [ComVisible(true)] /// <summary> /// 网页调用C#方法 /// </summary> public class ScriptCallbackObject //注册winning脚本c#互操..
c#中使用webview2
wanxiweilai的博客
01-16 2935
1、Nuget下载 Microsoft.Web.WebView2 （运行电脑中必须安装edage浏览器）如果在wpf中使用本地html文件必须设置所要显示的所有资源为始终复制。包括调用的js和css文件。如果使用原生态的webbrowser 则需要添加如下到html中。2、在xaml中引用。
C# 使用 webview2 嵌入网页
qq_42026600的博客
06-13 2481
C#客户端程序, 窗口里嵌入一个web网页，可通过URL跳转的那种。并且，需要将登录的身份验证信息（token）设置到请求头里。
WebView2.DOM:与WebView2一起使用的C＃DOM绑定
05-19
WebView2.DOM 与WebView2一起使用的C＃DOM绑定。 这仍然是Beta版软件，尚未准备好投入生产 介绍 使用此库，您可以直接在C＃中控制WebView2的内容，并具有C＃提供的类型安全的所有优点。 例如，您可以这样做： using WebView2 . DOM ; using static WebView2 . DOM . HTMLElementTag ; // ... var document = window . document ; // Type-safe element creation var b = document . createHTMLElement ( button ); // b is HTMLButtonElement // C# events b . onclick += ( s , e ) => window . alert ( "
.net8.0中使用fastreport实现无水印打印 包内带一份winform项目及一张report
最新发布
03-27
.net8.0中使用fastreport fastreport为25.01+Crack版本无水印无打印限制。 包内带一份winform项目及一张report winform实现了报表的打印+报表的设计。
c# .net 8.0 系统库函数，接口 报错提示 中文提示 导入路径C:\Program Files\dotnet\packs
04-19
c# .net 8.0 系统库函数，接口 报错提示 中文提示 导入路径C:\Program Files\dotnet\packs .net 8.0版本 Microsoft.NETCore.App.Ref Microsoft.WindowsDesktop.App.Ref Microsoft.AspNetCore.App.Ref C:\Program ...
在WinForm和WPF中使用GMap.Net地图插件简单教程
10-26
GMap.NET是一个强大、免费、跨平台、开源的.NET控件，它在Windows Forms 和WPF环境中能够使用来自Google, Yahoo!, Bing, OpenStreetMap, ArcGIS, Pergo, SigPac等地图，下面看一下使用方法
C#,.net,winform上SVG的源代码和示例
02-29
在本文中，我们将深入探讨如何在C# .NET WinForm应用程序中使用SVG（Scalable Vector Graphics）图形。SVG是一种开放标准的矢量图形格式，它允许开发者创建可缩放的、高质量的图形，适用于各种屏幕分辨率。由于...
C# 踩坑记录
qq_38239133的博客
03-02 2259
缺少命名空间 System.Drawing 以下的类，加入System.Drawing.Common 5.0.2版本，最新版本不懂为何不行 ，有时.NET Framework4.6 不行，要4.8。
c# 通过webView2模拟登陆小红书网页版，解析无水印视频图片，以及解决X-s,X-t签名验证【2023年4月29日】
byc6352的专栏
04-15 9149
c# 通过webView2模拟登陆小红书网页版，解析无水印视频图片，以及解决X-s,X-t签名验证。日期：2023-4-29
C# Winform 中使用 Webview2
笨笨D幸福 - 后花园
05-06 7784
目前的windows/Linux下的UI方案，以Qt为主，Flutter, Electron为辅，其他的各种UI都是不堪大用。除了使用CEF的Qt/C++/C#方案，Qt+WebEngine, 目前在Windows下各家的最终归路都转向Webview2方案，可以极大地减少发布的程序的大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值