三.Winform使用Webview2加载本地HTML页面

东明之羞

已于 2024-01-21 15:20:17 修改

阅读量1.7k

点赞数 7

分类专栏： WInform-Webview2 文章标签： html c# 前端 C# winform

于 2024-01-21 14:10:24 首次发布

本文链接：https://blog.csdn.net/qq_28254093/article/details/135728555

版权

WInform-Webview2 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

本文介绍了如何在Winform中利用WebView2加载本地HTML页面，并演示了创建Demo2界面，添加WebView2控件，设置按钮事件以及加载HTML内容的过程，还涉及HTML文件的设置和文件路径的获取方法。

摘要由CSDN通过智能技术生成

往期目录

创建Demo2界面

经过前面两小节一.Winform使用Webview2(Edge浏览器核心) 创建demo(Demo1)实现回车导航到指定地址。
二.Winform使用Webview2在Demo1中实现地址简单校验我们已经学会了创建Form窗体。

在解决方案资源管理右键添加From窗体输入Demo2.cs
在 MainForm窗体上添加button，文字修改为和WebView2 中HTML 和C#之间通信
添加button的点击事件，事件代码如下

 /// <summary>
 /// 按钮点击打开Demo2窗口
 /// </summary>
 private void btnDemo2_Click(object sender, EventArgs e)
 {
     Demo2 demo2 = new Demo2();
     demo2.Show();
 }

创建HTML页面

在Demo2同级别目录添加HTML文件夹和demo2.html
demo2.html添加如下内容

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Demo2TextHTMl</title>
</head>

<script></script>
<body>
   <h1>Hello ，Winform +<b>WebView2</b> </h1>
</body>
</html>

html创建好之后，一定一定要设置文件复制到输出目录
文件属性窗口中，复制到输出目录为如果较新则复制

设置之后我们通过运行可以看到生成目录中就有了demo2.html。使用生成目录中的demo2.html是为了便于我们后期通过打包安装等操作后程序可以加载正确的路径。

F5启动生成之后如下图
html生成到程序运行目录

生成到Debug目录还是Release目录取决于解决方案配置

在Demo2窗体上添加WebView2和按钮

如下
Demo2窗体
修改对应按钮(Name)

刷新btnRefresh
发送消息到HTML(btnSendToHtml)
待会点击HTMl会被修改文字的按钮(butByHtmlChange) 同时设置 Enabled为False
WebViwe2(mainView2)

加载HTML

为Demo2窗体添加Load事件


        /// <summary>
        /// 窗体加载程序
        /// </summary>

        private async void Demo2_Load(object sender, EventArgs e)
        {
            //获取可执行目录地址
            string exePath = Application.StartupPath;
            
            //拼接计算html页面路径
            string relativePath = "../../HTML/Demo2.html";
            string path = Path.GetFullPath(Path.Combine(exePath, relativePath));

            this.mainView2.Source = new Uri(@"file:///" + path);
        }