首先在nuget中安裝CefSharp.Wpf元件用于解析html，是一個web浏覽器核心，支援h5
我使用的CefSharp.Wpf版本是90.6.70
WPF目标架構：.NET5
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using CefSharp;
using CefSharp.Wpf;
namespace WpfApp1
{
/// <summary>
/// WindowWeb.xaml 的互動邏輯
/// </summary>
public partial class WindowWeb : Window
{
public WindowWeb()
{
InitializeComponent();
//WebBrowser webBrowser = new WebBrowser();
//webBrowser.Source = new Uri("http://www.baidu.com");
//grid01.Children.Add(webBrowser);
ChromiumWebBrowser webBrowser = new ChromiumWebBrowser();
//v.Title = "加載本地網頁";
//webBrowser.Name = "加載本地網頁";
// webBrowser.Address = "http://www.baidu.com";
//注入c#方法到前端頁面
webBrowser.JavascriptObjectRepository.Register("csharpTest", new JavascriptCallCSharp(), true, BindingOptions.DefaultBinder);
webBrowser.JavascriptObjectRepository.ObjectBoundInJavascript += (sender, e) =>
{
var name = e.ObjectName;
System.Diagnostics.Debug.WriteLine($"對象 {e.ObjectName} 綁定成功.");
};
webBrowser.Address = AppDomain.CurrentDomain.BaseDirectory + "HTML/index.html";
grid01.Children.Add(webBrowser);
}
}
}
//功用：js調用C#背景方法
//建立時間：2021-7-9 10:20:39
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
namespace WpfApp1
{
/// <summary>
/// js調用C#背景方法
/// </summary>
public class JavascriptCallCSharp
{
public void ShowMsg(string data)
{
MessageBox.Show($"目前時間：" + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "," + data);
}
}
}
準備靜态頁面
前端js調用C#方法，注意C#的背景方法在前端調用時，是駱駝命名的方法，首字母變為小寫了，否則調用不會命中背景方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景管理模闆</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<!--<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="css/global.css" media="all">
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">-->
</head>
<body>
<div>
WPF加載本地HTML，天下非一人一姓之天下，乃天下人之天下也
</div>
<div>
<a href="userList.html">使用者頁面</a>
</div>
<div style="margin:20px;">
<label>請輸入傳給背景的參數：</label>
<input type="text" id="txtName" />
<input type="button" value="調用C#方法" onclick="callBack01()"/>
</div>
<script type="text/javascript">
//CefSharp.BindObjectAsync("csharpTest");
(async function () {
await CefSharp.BindObjectAsync("csharpTest");
})();
function callBack01() {
try {
var txtName = document.getElementById("txtName").value;
//調用C#背景方法
csharpTest.showMsg(txtName);
} catch (e) {
alert(e);
}
}
</script>
</body>
</html>