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

DotNet大王

前言

本文介绍C# WPF里怎么使用CefSharp嵌入一个网页，并给出一个简单示例演示C#和网页（JS）的交互实现。

1、创建项目

创建一个WPF项目，比如命名为“WpfWithCefSharpDemo”，Winform项目类似。

2、创建一个网页

嵌入的网页可以是在线的（即给出一个URL），也可以是一个离线的HTML网页，本文为了演示，在工程里直接创建网页 test.html ，属性设置 生成操作 为 内容 ， 复制到输出目录 为 如果较新则复制 。

临时加更干货分享

大家能看到这里，已是对我们的支持了。 分享一组2023年2月录制的C#零基础教程。 我们喜欢做这样的分享，它足够的基础，对新手友好。如果需要的话，就来免费领取吧！

资料免费自取：

由于内容过多不便呈现， 需要视频教程和配套源码的小伙伴，点击下方卡片！

也可点击下方卡片： 点击后自动复制威芯号，并跳转到威芯。搜索威芯号添加，内容已做打包， 备注知乎

即可免费领取，注意查收！

<!DOCTYPE html>  
    <meta charset="UTF-8">  
    <title>CefSharp测试</title>  
    <script >  
        // 测试在Web中调用C#的方法  
        function callCSharpMethod() {  
            window.cefSharpExample.testMethod("来自JS的调用");  
        // 测试C#调用JS的方法，只传递一个普通的字符串  
        function displayMessage(message) {  
            alert(message);  
        // 接收C#传递过来的JSON对象，并以表格形式展示在页面上  
        function displayJson(json) {  
            var obj = JSON.parse(json);  
            var html = "<table border='1'>";  
            for (var prop in obj) {  
                html += "<tr>";  
                html += "<td>" + prop + "</td>"  
                html += "<td>" + obj[prop] + "</td>"  
                html += "</tr>"  
            html += "</table>";  
            document.getElementById("jsonTable").innerHTML = html;  
    </script>  
</head>  
<h1>CefSharp测试</h1>  
<button onclick="callCSharpMethod()">调用C#方法</button>  
<div id="jsonTable"></div>  
</body>  
</html>

上面的代码给了相关的注释，应该很明了：

JS方法 callCSharpMethod ：用于测试JS调用C#的方法，其中 cefSharpExample 为C#注册的一个对象， testMethod 是其一个方法，JS中方法名首字母是小写（C#里按规则是大写），首字母这里有区别，要注意一下；
JS方法 displayMessage 和 displayJson ：用于测试C#调用JS的方法，方法定义类似，前者入参是一个普通字符串，后者入参是一个JSON字符串。
div元素jsonTable用于展示C#传来的JSon对象数据。

3、添加CefSharp包

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

4、添加CefSharp控件

在 MainWindow.xaml 中引入 CefSharp.Wpf 命名空间(取别名为 wpf ，这里随意)，将它的 chromium 控件加入到窗体中，顺带加几个测试按钮等：

<Window x:Class="WpfWithCefSharpDemo.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:wpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"  
        mc:Ignorable="d"  
        Title="WPF加载CefSharp测试" Height="450" Width="800">  
        <Grid.RowDefinitions>  
            <RowDefinition Height="35"></RowDefinition>  
            <RowDefinition Height="*"></RowDefinition>  
            <RowDefinition Height="50"></RowDefinition>  
        </Grid.RowDefinitions>  
        <TextBlock Text="下面显示的是网页内容"></TextBlock>  
        <Border Grid.Row="1" BorderBrush="DarkOrange" BorderThickness="2">  
            <wpf:ChromiumWebBrowser x:Name="Browser" Loaded="Browser_OnLoaded">  
            </wpf:ChromiumWebBrowser>  
        </Border>  
        <Border Margin="3 5" Grid.Row="2" BorderBrush="Blue" BorderThickness="2" VerticalAlignment="Center">  
            <StackPanel Orientation="Horizontal" Height="35">  
                <TextBlock Text="右侧按钮是WPF按钮" VerticalAlignment="Center" Margin="5 3"></TextBlock>  
                <Button Content="调用JS方法" Click="CallJSFunc_Click" Height="30" Padding="10 2"></Button>  
                <Button Content="C#传递Json对象到网页" Click="SendJsonToWeb_Click" Height="30" Padding="10 2"></Button>  
            </StackPanel>  
        </Border>  
    </Grid>  
</Window>

5、在C#中调用JS方法

在 MainWindow.xaml.cs 里，添加相关控件的事件处理方法，即C#调用JS方法的相关代码：

using CefSharp;  
using Newtonsoft.Json;  
using System;  
using System.IO;  
using System.Text;  
using System.Windows;  
namespace WpfWithCefSharpDemo  
    public partial class MainWindow : Window  
        public MainWindow()  
            InitializeComponent();  
            // 允许以同步的方式注册C#的对象到JS中  
            Browser.JavascriptObjectRepository.Settings.LegacyBindingEnabled = true;  
            CefSharpSettings.WcfEnabled = true;  
            // 注册C#的对象到JS中的代码必须在Cef的Browser加载之前调用  
            Browser.JavascriptObjectRepository.Register("cefSharpExample", new CefSharpExample(), false,  
                options: BindingOptions.DefaultBinder);  
        /// <summary>  
        /// Cef浏览器控件加载完成后，加载网页内容，可以加载网页的Url，也可以加载网页内容  
        /// </summary>  
        /// <param name="sender"></param>  
        /// <param name="e"></param>  
        private void Browser_OnLoaded(object sender, RoutedEventArgs e)  
            var htmlFile = $"{AppDomain.CurrentDomain.BaseDirectory}test.html";  
            if (!File.Exists(htmlFile))  
                return;  
            var htmlContent = File.ReadAllText(htmlFile, Encoding.UTF8);  
            Browser.LoadHtml(htmlContent);  
        /// <summary>  
        /// C#里调用JS的一般方法  
        /// </summary>  
        /// <param name="sender"></param>  
        /// <param name="e"></param>  
        private void CallJSFunc_Click(object sender, RoutedEventArgs e)  
            var jsCode = $"displayMessage('C#里的调用')";  
            Browser.ExecuteScriptAsync(jsCode);  
        /// <summary>  
        /// C#调用一个JS的方法，并传递一个JSON对象  
        /// </summary>  
        /// <param name="sender"></param>  
        /// <param name="e"></param>  
        private void SendJsonToWeb_Click(object sender, RoutedEventArgs e)  
            var jsonContent = new  
                Id = 1,  
                Name = "沙漠尽头的狼",  
                Age = 25,  
                WebSite="https://dotnet9.com"  
            var jsonStr = JsonConvert.SerializeObject(jsonContent);  
            // 传递Json对象，即传递一个JSON字符串，和前面的一个示例一样  
            var jsCode = $"displayJson('{jsonStr}')";  
            Browser.ExecuteScriptAsync(jsCode);  
    public class CefSharpExample  
        public void TestMethod(string message)