WPF如何引入JS：通过WebBrowser控件、通过WebView2控件、通过JavaScript引擎、使用第三方库。 在这四个方法中，最常用的是通过WebBrowser控件和WebView2控件的方法。下面将详细介绍如何使用WebBrowser控件来引入和执行JavaScript代码。
Windows Presentation Foundation (WPF) 是一种微软开发的UI框架，主要用于开发桌面应用程序。尽管WPF本身并不直接支持JavaScript，但可以通过一些间接的方式实现JavaScript与WPF的集成。本文将详细介绍几种在WPF项目中引入JavaScript的方法，并深入探讨每种方法的优缺点和使用场景。
一、通过WebBrowser控件
1. 基本概念
WPF中的WebBrowser控件是一个内嵌的Internet Explorer浏览器实例。通过这个控件，开发者可以加载并显示HTML页面，并在这些页面中执行JavaScript代码。
2. 简单示例
首先，我们需要在XAML中添加一个WebBrowser控件：
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="450" Width="800">
<Grid>
<WebBrowser x:Name="webBrowser" />
</Grid>
</Window>
接着，在代码后文件中加载HTML内容并执行JavaScript：
using System.Windows;
namespace WpfApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
LoadHtml();
}
private void LoadHtml()
{
string html = @"
<html>
<head>
<script type='text/javascript'>
function showMessage() {
alert('Hello from JavaScript!');
}
</script>
</head>
<body>
<button onclick='showMessage()'>Click Me</button>
</body>
</html>";
webBrowser.NavigateToString(html);
}
}
}
在上述代码中，HTML内容包括一个简单的JavaScript函数和一个按钮，点击按钮时会执行JavaScript函数。
3. 双向通信
除了简单地执行JavaScript，WPF与JavaScript之间的双向通信也是非常重要的。可以通过注册C#对象到JavaScript全局对象中实现这一点：
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using mshtml;
namespace WpfApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
LoadHtml();
webBrowser.LoadCompleted += WebBrowser_LoadCompleted;
}
private void LoadHtml()
{
string html = @"
<html>
<head>
<script type='text/javascript'>
function callCSharpMethod() {
window.external.ShowMessage('Hello from JavaScript!');
}
</script>
</head>
<body>
<button onclick='callCSharpMethod()'>Call C# Method</button>
</body>
</html>";
webBrowser.NavigateToString(html);
}
private void WebBrowser_LoadCompleted(object sender, NavigationEventArgs e)
{
dynamic activeX = webBrowser.Document;
activeX.ScriptErrorsSuppressed = true;
activeX.ObjectForScripting = new ScriptManager();
}
}
[System.Runtime.InteropServices.ComVisible(true)]
public class ScriptManager
{
public void ShowMessage(string message)
{
MessageBox.Show(message);
}
}
}
在这个例子中，我们定义了一个ScriptManager类，并将其注册到JavaScript的window.external对象上。这样，JavaScript可以调用C#方法。
二、通过WebView2控件
1. 基本概念
WebView2是微软推出的新一代浏览器控件，基于Chromium内核。相比传统的WebBrowser控件，WebView2提供了更好的性能和现代Web标准的支持。
2. 安装和配置
首先，需要在项目中安装WebView2 SDK，可以通过NuGet包管理器进行安装：
Install-Package Microsoft.Web.WebView2
在XAML中添加WebView2控件：
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
Title="MainWindow" Height="450" Width="800">
<Grid>
<wv2:WebView2 x:Name="webView" />
</Grid>
</Window>
在代码后文件中初始化并加载HTML内容：
using System.Windows;
namespace WpfApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
InitializeWebView();
}
private async void InitializeWebView()
{
await webView.EnsureCoreWebView2Async(null);
string html = @"
<html>
<head>
<script type='text/javascript'>
function showMessage() {
alert('Hello from JavaScript!');
}
</script>
</head>
<body>
<button onclick='showMessage()'>Click Me</button>
</body>
</html>";
webView.NavigateToString(html);
}
}
}
3. 双向通信
WebView2也支持双向通信，可以通过JavaScript与C#之间发送消息：
using System.Windows;
namespace WpfApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
InitializeWebView();
}
private async void InitializeWebView()
{
await webView.EnsureCoreWebView2Async(null);
webView.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
string html = @"
<html>
<head>
<script type='text/javascript'>
function callCSharpMethod() {
window.chrome.webview.postMessage('Hello from JavaScript!');
}
</script>
</head>
<body>
<button onclick='callCSharpMethod()'>Call C# Method</button>
</body>
</html>";
webView.NavigateToString(html);
}
private void CoreWebView2_WebMessageReceived(object sender, Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs e)
{
string message = e.TryGetWebMessageAsString();
MessageBox.Show(message);
}
}
}
在这个例子中，JavaScript通过window.chrome.webview.postMessage方法发送消息，C#通过WebMessageReceived事件接收消息。
三、通过JavaScript引擎
1. 基本概念
除了使用Web控件外，还可以直接在C#代码中嵌入JavaScript引擎，如Jint或ClearScript。这种方式适用于不需要UI交互的场景。
2. 使用Jint
Jint是一个JavaScript解释器，可以在.NET环境中执行JavaScript代码。首先，通过NuGet包管理器安装Jint：
Install-Package Jint
然后，在代码中执行JavaScript：
using Jint;
using System;
namespace WpfApp
{
class Program
{
static void Main(string[] args)
{
var engine = new Engine()
.SetValue("log", new Action<string>(Console.WriteLine));
engine.Execute(@"
function greet(name) {
log('Hello, ' + name + '!');
}
greet('World');
");
}
}
}
3. 使用ClearScript
ClearScript是另一个JavaScript引擎，可以在.NET中运行。首先，通过NuGet包管理器安装ClearScript：
Install-Package Microsoft.ClearScript
Install-Package Microsoft.ClearScript.V8
然后，在代码中执行JavaScript：
using Microsoft.ClearScript;
using Microsoft.ClearScript.V8;
using System;
namespace WpfApp
{
class Program
{
static void Main(string[] args)
{
using (var engine = new V8ScriptEngine())
{
engine.AddHostObject("host", new HostFunctions());
engine.AddHostObject("log", new Action<string>(Console.WriteLine));
engine.Execute(@"
function greet(name) {
log('Hello, ' + name + '!');
}
greet('World');
");
}
}
}
}
四、使用第三方库
1. 基本概念
还有一些第三方库可以帮助在WPF中引入JavaScript，这些库通常封装了复杂的底层细节，使开发者可以更方便地使用JavaScript。
2. 使用CefSharp
CefSharp是一个基于Chromium的浏览器控件，支持在WPF中嵌入Chromium浏览器。首先，通过NuGet包管理器安装CefSharp：
Install-Package CefSharp.Wpf
在XAML中添加CefSharp控件：
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cef="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
Title="MainWindow" Height="450" Width="800">
<Grid>
<cef:ChromiumWebBrowser x:Name="browser" />
</Grid>
</Window>
在代码后文件中加载HTML内容：
using System.Windows;
namespace WpfApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
LoadHtml();
}
private void LoadHtml()
{
string html = @"
<html>
<head>
<script type='text/javascript'>
function showMessage() {
alert('Hello from JavaScript!');
}
</script>
</head>
<body>
<button onclick='showMessage()'>Click Me</button>
</body>
</html>";
browser.LoadHtml(html);
}
}
}
3. 双向通信
CefSharp也支持双向通信，可以通过JavaScript与C#之间发送消息：
using System.Windows;
using CefSharp;
using CefSharp.Wpf;
namespace WpfApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
LoadHtml();
}
private void LoadHtml()
{
string html = @"
<html>
<head>
<script type='text/javascript'>
function callCSharpMethod() {
CefSharp.PostMessage('Hello from JavaScript!');
}
</script>
</head>
<body>
<button onclick='callCSharpMethod()'>Call C# Method</button>
</body>
</html>";
browser.LoadHtml(html);
browser.JavascriptMessageReceived += Browser_JavascriptMessageReceived;
}
private void Browser_JavascriptMessageReceived(object sender, JavascriptMessageReceivedEventArgs e)
{
string message = e.Message.ToString();
MessageBox.Show(message);
}
}
}
在这个例子中，JavaScript通过CefSharp.PostMessage方法发送消息，C#通过JavascriptMessageReceived事件接收消息。
总结
WPF并不直接支持JavaScript，但可以通过多种方式实现JavaScript与WPF的集成，包括通过WebBrowser控件、通过WebView2控件、通过JavaScript引擎、使用第三方库。每种方法都有其优缺点，开发者可以根据具体需求选择合适的实现方式。通过这些技术手段，可以在WPF应用中实现丰富的Web功能和现代UI体验。
相关问答FAQs：
1. WPF如何在应用程序中引入JavaScript？
WPF提供了一个名为WebBrowser的控件，它允许你在应用程序中嵌入网页内容，包括JavaScript。你可以将WebBrowser控件添加到你的WPF窗口中，并使用Navigate方法加载包含JavaScript的网页。
2. 我应该如何在WPF中与JavaScript进行交互？
在WPF中与JavaScript进行交互有几种方法。一种是通过使用InvokeScript方法调用JavaScript函数，并传递参数。另一种是通过使用ObjectForScripting属性，将WPF应用程序中的对象暴露给JavaScript代码，从而允许JavaScript调用WPF中的方法。
3. 如何在WPF应用程序中使用JavaScript库或框架？
如果你想在WPF应用程序中使用JavaScript库或框架，你可以将这些库或框架的引用添加到你的HTML页面中，并将该页面加载到WebBrowser控件中。这样，你就可以通过在WPF中嵌入的网页上使用这些库或框架来实现所需的功能。
文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/2264850
