CefSharp 知道这些就完事了

最新推荐文章于 2024-07-30 17:15:00 发布

犇犇~

最新推荐文章于 2024-07-30 17:15:00 发布

阅读量1.6w

点赞数 12

分类专栏： C# 文章标签： c# cefsharp

本文链接：https://blog.csdn.net/hcmdghv587/article/details/106279735

版权

C# 专栏收录该内容

4 篇文章 4 订阅

订阅专栏

文章目录

0. 简介
1. 安装
2. H.264支持
3. 加载本地HTML文件
4. 多个窗口显示浏览器
5. 执行JavaScript代码
6. 在JS中调用C#方法

0. 简介

CefSharp，简单来说就是一款.Net编写的浏览器包，方便你在Winform和WPF中内嵌的Chrome浏览器组件。它支持HTML5。
CefSharp的功能比较复杂，以下只介绍一些我觉得比较重要的并且目前经常用的功能。

1. 安装

CefSharp的安装过程如下：

打开Visual Stduio，新建一个Windows窗体应用（.NET Framework）；
在“工具”菜单打开NuGet包管理器；
搜索“CefSharp.WinForms”进行安装；
CefSharp不能在“Any CPU”平台上运行，需要配置。打开“配置管理器”；
新建“x86”和“x64”两个平台。从理论上来说使用x86或者x64平台都行，但由于之后要使用编译好的支持h264的x86内核，因此此处选择x86平台；
在 Form1.cs 中添加如下代码；

using CefSharp;
using CefSharp.WinForms;
using System;
using System.Windows.Forms;

namespace WindowsFormsApp8 {
    public partial class Form1 : Form {
        ChromiumWebBrowser browser;
        public void InitBrowser() {
            CefSettings settings = new CefSettings();

            // Note that if you get an error or a white screen, you may be doing something wrong !
            // Try to load a local file that you're sure that exists and give the complete path instead to test
            // for example, replace page with a direct path instead :
            // String page = @"C:\Users\SDkCarlos\Desktop\afolder\index.html";

            // String page = string.Format(@"{0}\html-resources\html\index.html", Application.StartupPath);
            String url = "http://www.html5test.com";

            // Initialize cef with the provided settings
            Cef.Initialize(settings);
            // Create a browser component
            browser = new ChromiumWebBrowser(url);

            // Add it to the form and fill it to the form window.
            this.Controls.Add(browser);
            browser.Dock = DockStyle.Fill;

            // Allow the use of local resources in the browser
            BrowserSettings browserSettings = new BrowserSettings();
            browserSettings.FileAccessFromFileUrls = CefState.Enabled;
            browserSettings.UniversalAccessFromFileUrls = CefState.Enabled;
            browser.BrowserSettings = browserSettings;
        }

        public Form1() {
            InitializeComponent();
            InitBrowser();
        }
    }
}

调试程序，发现窗口有白边，原因是没有设置高分屏适配，按照C# WinForm程序设计的第1.3节的方法设置即可；
调试程序，得到最终效果。

2. H.264支持

默认情况下，CefSharp是不支持H.264的，因此不可以进行视频播放。为了使其支持视频播放，需要修改其内核文件，操作步骤如下：
注：请确保安装的CefSharp.WinForms是79.1.360版本的！

下载我的老师（感谢他！）编译好的支持H264的内核文件 libcef.dll ；
链接：下载地址
提取码：8q2u
用其替换packages目录下的同名文件；
调试程序，查看效果。显然浏览器已支持H.264。

3. 加载本地HTML文件

除了使用CefSharp浏览器访问网络地址，还有一个重要的用途就是访问本地文件。
首先将需要用到的HTML和其他静态文件拷贝到工程目录，并设置“复制到输出目录”：
在这里插入图片描述
然后编写如下代码：

using CefSharp;
using CefSharp.WinForms;
using System;
using System.IO;
using System.Windows.Forms;

namespace WindowsFormsApp8 {
    public partial class Form1 : Form {
        ChromiumWebBrowser browser;
        public void InitBrowser() {
            CefSettings settings = new CefSettings();

            // Note that if you get an error or a white screen, you may be doing something wrong !
            // Try to load a local file that you're sure that exists and give the complete path instead to test
            // for example, replace page with a direct path instead :
            // String page = @"C:\Users\SDkCarlos\Desktop\afolder\index.html";

            // String page = string.Format(@"{0}\html-resources\html\index.html", Application.StartupPath);
            String url = string.Format(@"{0}\ui\test.html", Application.StartupPath);

            if (!File.Exists(url)) {
                MessageBox.Show("Error: File doesn't exists : " + url);
            }

            // Initialize cef with the provided settings
            Cef.Initialize(settings);
            // Create a browser component
            browser = new ChromiumWebBrowser(url);

            // Add it to the form and fill it to the form window.
            this.Controls.Add(browser);
            browser.Dock = DockStyle.Fill;

            // Allow the use of local resources in the browser
            BrowserSettings browserSettings = new BrowserSettings();
            browserSettings.FileAccessFromFileUrls = CefState.Enabled;
            browserSettings.UniversalAccessFromFileUrls = CefState.Enabled;
            browser.BrowserSettings = browserSettings;
        }

        public Form1() {
            InitializeComponent();
            InitBrowser();
        }
    }
}

调试程序，可以看到效果：
在这里插入图片描述

4. 多个窗口显示浏览器

如果有多个窗口都需要显示浏览器，每个窗口的代码并不完全相同。
主窗口的代码如上一节所示，新的窗口的代码如下：

using System;
using System.Windows.Forms;
using CefSharp;
using CefSharp.WinForms;
using System.IO;

namespace WindowsFormsApp8 {
    public partial class Form2 : Form {
        ChromiumWebBrowser browser;
        public void InitBrowser() {
            String url = string.Format(@"{0}\ui\test.html", Application.StartupPath);

            if (!File.Exists(url)) {
                MessageBox.Show("Error: File doesn't exists : " + url);
            }

            browser = new ChromiumWebBrowser(url);

            this.Controls.Add(browser);
            browser.Dock = DockStyle.Fill;
        }

        public Form2() {
            InitializeComponent();
            InitBrowser();
        }
    }
}

显然，与主窗口的区别是去掉了“Cef.Initialize()”部分。
运行效果如下：
在这里插入图片描述

5. 执行JavaScript代码

如果需要通过程序控制网页的显示、流程，最明显的方法莫过于执行JavaScript代码了。特别是如果使用Vue.js框架，那么通过JS可以实现“模板渲染”的功能。以下展示了一个示例。
注意：ExecuteScriptAsync()方法是异步执行的，程序并不会阻塞！

编辑HTML文件（Vue.js框架），增加函数接口；

<script>
    const vue = new Vue({
        el: '#app',
        data: {
            title: '标题1',
        },
    });

    function changeTitle(title) {
        vue.title = title;
    }
</script>

编写C#代码，请注意两处中文注释的部分；

using CefSharp;
using CefSharp.WinForms;
using System;
using System.IO;
using System.Windows.Forms;

namespace WindowsFormsApp8 {
    public partial class Form1 : Form {
        ChromiumWebBrowser browser;
        public void InitBrowser() {
            CefSettings settings = new CefSettings();

            // Note that if you get an error or a white screen, you may be doing something wrong !
            // Try to load a local file that you're sure that exists and give the complete path instead to test
            // for example, replace page with a direct path instead :
            // String page = @"C:\Users\SDkCarlos\Desktop\afolder\index.html";

            // String page = string.Format(@"{0}\html-resources\html\index.html", Application.StartupPath);
            String url = string.Format(@"{0}\ui\test.html", Application.StartupPath);

            if (!File.Exists(url)) {
                MessageBox.Show("Error: File doesn't exists : " + url);
            }

            // Initialize cef with the provided settings
            Cef.Initialize(settings);
            // Create a browser component
            browser = new ChromiumWebBrowser(url);

            // Add it to the form and fill it to the form window.
            this.Controls.Add(browser);
            browser.Dock = DockStyle.Fill;

            // Allow the use of local resources in the browser
            BrowserSettings browserSettings = new BrowserSettings();
            browserSettings.FileAccessFromFileUrls = CefState.Enabled;
            browserSettings.UniversalAccessFromFileUrls = CefState.Enabled;
            browser.BrowserSettings = browserSettings;

            // 当页面加载完毕时，执行JavaScript代码
            browser.ExecuteScriptAsyncWhenPageLoaded("changeTitle('我不是鸭鸭')");
        }

        public Form1() {
            InitializeComponent();
            InitBrowser();
        }

        private void button1_Click(object sender, EventArgs e) {
            // 当点击按钮时，执行JavaScript代码
            browser.ExecuteScriptAsync("changeTitle('我是鸭鸭')");
        }
    }
}

调试程序，查看效果。

如果需要执行JavaScript代码并得到返回值，代码可以这么编写：
注意：EvaluateScriptAsync()方法是同步执行的，也就是程序会阻塞！

private void button1_Click(object sender, EventArgs e) {
        // 当点击按钮时，执行JavaScript代码
        Task<JavascriptResponse> response = browser.EvaluateScriptAsync("add(1, 2)");

        // response.Result.Result是Object类型
        MessageBox.Show("返回值为：" + response.Result.Result);
}

JavaScript代码：

function add(a, b) {
    for (var i = 0; i < 9999999999; ++i) {
        ;
    }
    return a + b;
}

6. 在JS中调用C#方法

在C#中编写如下代码：（注意中文注释的部分）
以下是同步执行的演示，即JS会阻塞等待C#执行完再继续执行。

using CefSharp;
using CefSharp.WinForms;
using System;
using System.IO;
using System.Windows.Forms;

namespace WindowsFormsApp8 {
    public partial class Form1 : Form {
        ChromiumWebBrowser browser;

        // 创建一个类，用于在JS中访问
        public class JsEvent {
            public void SayHello() {
                MessageBox.Show("你好，C#！");
            }
        }

        public void InitBrowser() {
            CefSettings settings = new CefSettings();

            // Note that if you get an error or a white screen, you may be doing something wrong !
            // Try to load a local file that you're sure that exists and give the complete path instead to test
            // for example, replace page with a direct path instead :
            // String page = @"C:\Users\SDkCarlos\Desktop\afolder\index.html";

            // String page = string.Format(@"{0}\html-resources\html\index.html", Application.StartupPath);
            String url = string.Format(@"{0}\ui\test.html", Application.StartupPath);

            if (!File.Exists(url)) {
                MessageBox.Show("Error: File doesn't exists : " + url);
            }

            // Initialize cef with the provided settings
            Cef.Initialize(settings);
            // Create a browser component
            browser = new ChromiumWebBrowser(url);

            // Add it to the form and fill it to the form window.
            this.Controls.Add(browser);
            browser.Dock = DockStyle.Fill;

            // Allow the use of local resources in the browser
            BrowserSettings browserSettings = new BrowserSettings();
            browserSettings.FileAccessFromFileUrls = CefState.Enabled;
            browserSettings.UniversalAccessFromFileUrls = CefState.Enabled;
            browser.BrowserSettings = browserSettings;

            // 绑定JavaScript对象
            CefSharpSettings.LegacyJavascriptBindingEnabled = true;
            CefSharpSettings.WcfEnabled = true;
            BindingOptions bindingOptions = new BindingOptions();
            // 如果不加此句，那么绑定的方法不能以大写字母开头
            bindingOptions.CamelCaseJavascriptNames = false;
            browser.JavascriptObjectRepository.Register("jsObj", new JsEvent(), isAsync: false, options: bindingOptions);
        }

        public Form1() {
            InitializeComponent();
            InitBrowser();
        }
    }
}

在HTML中编写如下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./index.css" rel="stylesheet">
    <script src="./vue.min.js"></script>
    <script src="./index.js"></script>
</head>
<body>

<div id="app">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>{{ title }}</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
            {{ '列表内容 ' + o }}
        </div>
    </el-card>
    <el-button @click="onclick">触发</el-button>
</div>

<script>
    const vue = new Vue({
        el: '#app',
        data: {
            title: '标题1',
        },
        methods: {
            onclick: function () {
                jsObj.sayHello();
                console.log('调用完毕！');
            }
        },
    });
</script>

</body>
</html>

运行效果：
在这里插入图片描述

犇犇~

关注

12
点赞
踩
65

收藏

觉得还不错? 一键收藏
3
评论
CefSharp 知道这些就完事了

文章目录0. 简介1. 安装2. H.264支持3. 加载本地HTML文件4. 多个窗口显示浏览器0. 简介CefSharp，简单来说就是一款.Net编写的浏览器包，方便你在Winform和WPF中内嵌的Chrome浏览器组件。它支持HTML5。CefSharp的功能比较复杂，以下只介绍一些我觉得比较重要的并且目前经常用的功能，此“挑食”之意也。1. 安装CefSharp的安装过程如下：打开Visual Stduio，新建一个Windows窗体应用（.NET Framework）；在“工具”
复制链接

扫一扫

专栏目录