cefsharp-使用教程

本文使用cefsharp版本为109.1.110.0，因为之后的版本就不在支持win7了，为了兼容

初始化

            var cachePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "CefSharp\\Cache");
#if ANYCPU
            //Only required for PlatformTarget of AnyCPU
            CefRuntime.SubscribeAnyCpuAssemblyResolver();
#endif
            var settings = new CefSettings()
            {
                //By default CefSharp will use an in-memory cache, you need to specify a Cache Folder to persist data
                CachePath = cachePath
            };

            settings.CefCommandLineArgs.Add("enable-media-stream");
            //https://peter.sh/experiments/chromium-command-line-switches/#use-fake-ui-for-media-stream
            settings.CefCommandLineArgs.Add("use-fake-ui-for-media-stream");
            //For screen sharing add (see https://bitbucket.org/chromiumembedded/cef/issues/2582/allow-run-time-handling-of-media-access#comment-58677180)
            settings.CefCommandLineArgs.Add("enable-usermedia-screen-capturing");

            // 禁用同源策略（慎用，确保仅用于本地环境）
            //settings.CefCommandLineArgs.Add("disable-web-security", "1");
            
            // 允许访问本地文件
            //settings.CefCommandLineArgs.Add("allow-file-access-from-files", "1");
            
            //settings.CefCommandLineArgs.Add("enable-javascript", "1");   // 确保JavaScript启用‌:ml-citation{ref="4" data="citationList"}

            //Example of checking if a call to Cef.Initialize has already been made, we require this for
            //our .Net 5.0 Single File Publish example, you don't typically need to perform this check
            //if you call Cef.Initialze within your WPF App constructor.
            if (Cef.IsInitialized == false)
            {
                //Perform dependency check to make sure all relevant resources are in our output directory.
                Cef.Initialize(settings, performDependencyCheck: true, browserProcessHandler: null);

               
            }

初始化只需要初始化一次，因为我用的wpf，所以放在了OnStartup中

<Window x:Class="cefsharp109.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:cefsharp109" 
        xmlns:wpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <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  Grid.Row="2" BorderBrush="Blue" BorderThickness="2" VerticalAlignment="Center">
                        <StackPanel Orientation="Horizontal" Height="35">
                            <TextBlock Text="右侧按钮是WPF按钮" VerticalAlignment="Center" >
                                </TextBlock>
                                <Button Content="调用JS方法" Click="CallJSFunc_Click" Height="30">
                                    </Button>
                                    <Button Content="C#传递Json对象到网页" Click="SendJsonToWeb_Click" Height="30" >
                                        </Button>
                                        </StackPanel>
                                        </Border>
    </Grid>
</Window>

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        Browser.JavascriptObjectRepository.Settings.LegacyBindingEnabled = true; CefSharpSettings.WcfEnabled = true;

        //禁止右键
        Browser.MenuHandler = new DisableContextMenuHandler(); //‌:ml - citation{ ref= "1,2" data = "citationList"}
        //注册C#的对象到JS中的代码必须在Cef的Browser加载之前调用
        Browser.JavascriptObjectRepository.Register("cefSharpExample", new CefSharpExample(), false, options: BindingOptions.DefaultBinder);

        
    }

    private void Browser_OnLoaded(object sender, RoutedEventArgs e)
    {
        var htmlFile = $"{AppDomain.CurrentDomain.BaseDirectory}html\\test.html";
        //var htmlFile = $"{AppDomain.CurrentDomain.BaseDirectory}html\\table.html";
        if (!File.Exists(htmlFile)) { return; }
        //var htmlContent = File.ReadAllText(htmlFile, Encoding.UTF8); 
        //Browser.LoadHtml(htmlContent);
        Browser.LoadUrl($"file://{htmlFile}");

        //Browser.ShowDevTools();
    }

    private void CallJSFunc_Click(object sender, RoutedEventArgs e)
    {
        //string msg = "testa";
        var jsCode = $"displayMessage('C#里的调用')"; 
        //string jsCode = $"test('{msg}')";
        Browser.ExecuteScriptAsync(jsCode);
    }

    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);

        string jsonstr="[   {     \"id\": 1,     \"name\": \"Alice\",     \"contact\": {\"email\": \"alice@example.com\", \"phone\": \"123-4567\"},     \"tags\": [\"admin\", \"user\"]   },   {     \"id\": 2,     \"name\": \"Bob\",     \"status\": true,     \"lastLogin\": \"2023-09-20\"   } ]";

        var jsCode = $"createTableFromJSON('{jsonstr}','tableContainer')";
        Browser.ExecuteScriptAsync(jsCode);
    }
}


public class CefSharpExample
{
    public void TestMethod(string message)
    {
        Application.Current.Dispatcher.Invoke(() => { MessageBox.Show("JS里的调用"); });
    }
}

代码里有c#调用JavaScript  和 JavaScript调用c# 的方法

html页

<!DOCTYPE html>
<html>
<head>
    <meta charset ="UTF-8"> <title>CefSharp测试</title>
    <script>
        function test(message) {
            alert(message);
        }
        //测试在Web中调用C#的方法 
        function callCSharpMethod() { window.cefSharpExample.testMethod("来自JS的调用"); }
        //测试C#调用JS的方法，只传递一个普通的字符串 
        function displayMessage(message) { alert(message); }
        //接收C#传递过来的JSON对象，并以表格形式展示在页面上
        

        function createTableFromJSON(data, containerId) {
            // 统一解析数据
            let parsedData;
            try {
                parsedData = typeof data === 'string' ? JSON.parse(data) : data;
            } catch (e) {
                console.error('JSON解析失败:', e.message);
                return null;
            }

            // 验证数据格式
            if (!Array.isArray(parsedData)) {
                console.error('数据必须是数组');
                return null;
            }
            if (parsedData.length === 0) {
                console.error('数据不能为空数组');
                return null;
            }

            // 验证容器存在性
            const container = document.getElementById(containerId);
            if (!container) {
                console.error(`容器 #${containerId} 不存在`);
                return null;
            }

            // 创建表格结构
            const table = document.createElement('table');
            table.className = 'json-table';
            table.innerHTML = `
    <thead>
      <tr>${getHeaders(parsedData).map(h => `<th>${h}</th>`).join('')}</tr>
    </thead>
    <tbody>
      ${parsedData.map(item => `
        <tr>${getHeaders(parsedData).map(h => `
          <td>${formatCell(item[h])}</td>
        `).join('')}</tr>
      `).join('')}
    </tbody>
  `;

            // 插入到容器
            container.innerHTML = '';
            container.appendChild(table);
            return table;

            // 辅助函数
            function getHeaders(dataArray) {
                return [...new Set(dataArray.flatMap(Object.keys))];
            }

            function formatCell(value) {
                if (value == null) return '-';
                if (typeof value === 'object') {
                    return `<pre>${JSON.stringify(value, null, 2)}</pre>`;
                }
                return value.toString();
            }
        }
    </script>
    <style>
        .json-table {
            border-collapse: collapse;
            width: 100%;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

            .json-table th {
                background-color: #f8f9fa;
                padding: 12px;
                text-align: left;
                border-bottom: 2px solid #dee2e6;
            }

            .json-table td {
                padding: 12px;
                border-bottom: 1px solid #dee2e6;
                vertical-align: top;
            }

            .json-table pre {
                margin: 0;
                white-space: pre-wrap;
                font-family: monospace;
            }
    </style>
</head>
<body>
    <h1>CefSharp测试</h1> 
    <button onclick ="callCSharpMethod()">调用C#方法</button> 
    <button onclick="test()">test</button>
    <div id ="tableContainer"></div>
</body>
</html>