C# 使用CefSharp内嵌网页-并与JS的交互

发布时间:2025-05-19 16:26:22 发布人:远客网络

一、C# 使用CefSharp内嵌网页-并与JS的交互

本文旨在介绍在C# WPF项目中集成CefSharp以嵌入网页，并演示C#与网页（JS）交互的简单实例。接下来，我们将一步步实现这一目标。

首先，创建一个WPF项目，例如命名为“WpfWithCefSharpDemo”。项目构建流程与Winform类似。

嵌入网页可以是在线URL，也可以是离线的HTML文件。本文采用在项目内直接创建一个名为“test.html”的文件，设置为生成操作为内容，并确保文件较新时更新。

在Visual Studio的NuGet包管理器中搜索并安装CefSharp.Wpf程序包。

在MainWindow.xaml中引入CefSharp.Wpf命名空间，添加Chromium控件至窗体，同时加入测试按钮等。

在MainWindow.xaml.cs中，编写事件处理方法，实现C#与JS方法的交互。注意方法命名遵循C#与HTML的区分大小写规则。

通过C#调用JS方法，黄色方框内显示网页内容。点击HTML按钮，测试C#方法。蓝色方框内显示WPF控件，点击WPF按钮，测试JS方法。蓝色方框内，点击WPF按钮，C#向网页传递Json对象。

完成示例，对比WPF自带WebBrowser控件与CefSharp的优劣势。WPF自带控件优势包括无需额外组件、兼容性高、提供了丰富的事件控制。劣势在于不支持现代Web标准、API相对有限。CefSharp则支持最新Web标准，性能更佳，提供丰富API，支持高级功能。劣势是需要额外组件，某些情况下可能性能不佳。选择时，需考虑具体需求。

二、如何使用cefsharp内嵌chrome浏览器内核

1、实现自己的本地图文编辑器时，集成TinyMCE作为编辑器组件是一个明智的选择。本文将记录集成流程，并分享实现前后交互传值的方法。相关案例已上传至GitHub，地址为：github.com/Griked/CefSh...

2、在项目开发中，使用的工具包括VS2022-Winform、CefSharp.WinForms（谷歌浏览器开源组件）和TinyMCE。

3、为了集成CefSharp.WinForms，我们首先在VS2022中通过“工具”菜单下的“NuGet包管理器”来安装所需的组件。接着，在Winform设计界面中拖拽ChromiumWebBrowser组件至窗口。随后，将Tiny-MCE文件夹放置于项目根目录下，确保将案例的sample.html文件替换为index.html，并保存于“@tinymce”文件夹中。

4、为了实现前后端的交互，需要编写C#代码。主要步骤包括配置CefSharp显示网页位置并注册JS调用C#的对象JsObj。注意，在配置管理器修改参数（如x64改x86）时，可能影响获取index.html文件路径的正确性，此时可删除一个“.Parent”或使用MessageBox.Show(url)打印确认路径。接着，编写C#方法供前端JS调用，并在Winform窗体大小变化时执行JS代码以实时更新TinyMCE编辑器尺寸。

5、前端代码的编写则侧重于与C#方法的交互，确保前后端可以顺利传值。界面展示如下图所示。

6、项目完整代码已上传至GitHub，地址为：github.com/Griked/CefSh...

7、在使用CefSharp内嵌谷歌浏览器的方法时，需注意生成文件目录可能非常庞大，调试时生成的文件夹大小接近300MB，这是因为几乎包含了整个开源谷歌浏览器的资源。对于初次接触此类集成方法的开发者，这可能是一个较大的挑战。因此，在决定采用此方法前，建议充分了解其复杂性和可能带来的资源消耗。