溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“C#怎么使用CefSharp實現(xiàn)內(nèi)嵌網(wǎng)頁”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“C#怎么使用CefSharp實現(xiàn)內(nèi)嵌網(wǎng)頁”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
創(chuàng)建一個WPF項目，比如命名為“WpfWithCefSharpDemo”，Winform項目類似。
嵌入的網(wǎng)頁可以是在線的（即給出一個URL），也可以是一個離線的HTML網(wǎng)頁，本文為了演示，在工程里直接創(chuàng)建網(wǎng)頁test.html，屬性設(shè)置生成操作為內(nèi)容，復(fù)制到輸出目錄為如果較新則復(fù)制。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CefSharp測試</title>
<script>
// 測試在Web中調(diào)用C#的方法
function callCSharpMethod() {
window.cefSharpExample.testMethod("來自JS的調(diào)用");
}
// 測試C#調(diào)用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>
<body>
<h2>CefSharp測試</h2>
<button onclick="callCSharpMethod()">調(diào)用C#方法</button>
<div id="jsonTable"></div>
</body>
</html>上面的代碼給了相關(guān)的注釋，應(yīng)該很明了：
JS方法callCSharpMethod：用于測試JS調(diào)用C#的方法，其中cefSharpExample為C#注冊的一個對象，testMethod是其一個方法，JS中方法名首字母是小寫（C#里按規(guī)則是大寫），首字母這里有區(qū)別，要注意一下；
JS方法displayMessage和displayJson：用于測試C#調(diào)用JS的方法，方法定義類似，前者入?yún)⑹且粋€普通字符串，后者入?yún)⑹且粋€JSON字符串。
div元素jsonTable用于展示C#傳來的JSon對象數(shù)據(jù)。
安裝CefSharp程序包，可以在Visual Studio的NuGet包管理器中搜索CefSharp.Wpf并安裝。
在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> <Grid.RowDefinitions> <RowDefinition Height="35"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="50"></RowDefinition> </Grid.RowDefinitions> <TextBlock Text="下面顯示的是網(wǎng)頁內(nèi)容"></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="右側(cè)按鈕是WPF按鈕" VerticalAlignment="Center" Margin="5 3"></TextBlock> <Button Content="調(diào)用JS方法" Click="CallJSFunc_Click" Height="30" Padding="10 2"></Button> <Button Content="C#傳遞Json對象到網(wǎng)頁" Click="SendJsonToWeb_Click" Height="30" Padding="10 2"></Button> </StackPanel> </Border> </Grid> </Window>
在MainWindow.xaml.cs里，添加相關(guān)控件的事件處理方法，即C#調(diào)用JS方法的相關(guān)代碼：
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加載之前調(diào)用
Browser.JavascriptObjectRepository.Register("cefSharpExample", new CefSharpExample(), false,
options: BindingOptions.DefaultBinder);
}
/// <summary>
/// Cef瀏覽器控件加載完成后，加載網(wǎng)頁內(nèi)容，可以加載網(wǎng)頁的Url，也可以加載網(wǎng)頁內(nèi)容
/// </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#里調(diào)用JS的一般方法
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void CallJSFunc_Click(object sender, RoutedEventArgs e)
{
var jsCode = $"displayMessage('C#里的調(diào)用')";
Browser.ExecuteScriptAsync(jsCode);
}
/// <summary>
/// C#調(diào)用一個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)
{
Application.Current.Dispatcher.Invoke(() => { MessageBox.Show("JS里的調(diào)用"); });
}
}
}CefSharpExample用于封裝JS調(diào)用的類及方法定義，注意C#這里TestMethod方法名首字母是大寫的，前面創(chuàng)建的HTML網(wǎng)頁調(diào)用的該方法名首字母小寫，再提醒一次，這里的區(qū)別要注意。
JS調(diào)用C#的方法：黃色方框內(nèi)顯示的網(wǎng)頁內(nèi)容，點擊HTML按鈕調(diào)用C#方法測試。
C#調(diào)用JS的普通方法：藍色方框內(nèi)顯示的WPF控件，點擊WPF按鈕調(diào)用JS方法測試。
C#傳遞Json對象給JS的方法：藍色方框內(nèi)，點擊WPF按鈕C#傳遞Json對象到網(wǎng)頁測試。
讀到這里，這篇“C#怎么使用CefSharp實現(xiàn)內(nèi)嵌網(wǎng)頁”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼