Cefsharp_ceph nfs

2022-11-04 21:23:17 浏览数 (1)

大家好，又见面了，我是你们的朋友全栈君。

文章目录

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

0. 简介

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

1. 安装

CefSharp的安装过程如下：

  1. 打开Visual Stduio，新建一个Windows窗体应用（.NET Framework）；
  2. 在“工具”菜单打开NuGet包管理器；
  3. 搜索“CefSharp.WinForms”进行安装；
  4. CefSharp不能在“Any CPU”平台上运行，需要配置。打开“配置管理器”；
  1. 新建“x86”和“x64”两个平台。从理论上来说使用x86或者x64平台都行，但由于之后要使用编译好的支持h264的x86内核，因此此处选择x86平台；
  1. 在 Form1.cs 中添加如下代码；
代码语言：javascript复制
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:UsersSDkCarlosDesktopafolderindex.html";
// String page = string.Format(@"{0}html-resourceshtmlindex.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();
}
}
}
  1. 调试程序，发现窗口有白边，原因是没有设置高分屏适配，按照C# WinForm程序设计的第1.3节的方法设置即可；
  2. 调试程序，得到最终效果。

2. H.264支持

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

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

3. 加载本地HTML文件

除了使用CefSharp浏览器访问网络地址，还有一个重要的用途就是访问本地文件。 首先将需要用到的HTML和其他静态文件拷贝到工程目录，并设置“复制到输出目录”：

然后编写如下代码：

代码语言：javascript复制
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:UsersSDkCarlosDesktopafolderindex.html";
// String page = string.Format(@"{0}html-resourceshtmlindex.html", Application.StartupPath);
String url = string.Format(@"{0}uitest.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. 多个窗口显示浏览器

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

代码语言：javascript复制
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}uitest.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()方法是异步执行的，程序并不会阻塞！

  1. 编辑HTML文件（Vue.js框架），增加函数接口；
代码语言：javascript复制
<script> const vue = new Vue({ 
 el: '#app', data: { 
 title: '标题1', }, }); function changeTitle(title) { 
 vue.title = title; } </script>
  1. 编写C#代码，请注意两处中文注释的部分；
代码语言：javascript复制
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:UsersSDkCarlosDesktopafolderindex.html";
// String page = string.Format(@"{0}html-resourceshtmlindex.html", Application.StartupPath);
String url = string.Format(@"{0}uitest.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('我是鸭鸭')");
}
}
}
  1. 调试程序，查看效果。

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

代码语言：javascript复制
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代码：

代码语言：javascript复制
function add(a, b) { 

for (var i = 0; i < 9999999999;   i) { 

;
}
return a   b;
}

6. 在JS中调用C#方法

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

代码语言：javascript复制
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:UsersSDkCarlosDesktopafolderindex.html";
// String page = string.Format(@"{0}html-resourceshtmlindex.html", Application.StartupPath);
String url = string.Format(@"{0}uitest.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中编写如下代码：

代码语言：javascript复制
<!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>

运行效果：

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/191701.html原文链接：https://javaforall.cn

c# html javascript vue.js

0 人点赞