在WPF/WinForm客户端软件开发中，我们经常需要将一些Web页面嵌入到桌面客户端软件中。可能大家一下就会想起webbrowser，但是由于使用IE内核，不同系统呈现效果会不同，还有一些其他问题，所以这里介绍使用CefSharp来实现。

CefSharp是基于Google浏览器的一个开源组件，是CEF在.NET中的应用。CefSharp的代码托管在GitHub上，https://github.com/cefsharp/CefSharp.NET (WPF and Windows Forms) bindings for the Chromium Embedded Framework。

目前CefSharp最新版本是51.0，由于在新版本的CefSharp中，已经取消了对WIN XP系统的支持。所以如果你的客户端软件需要支持WIN XP操作系统，建议使用CefSharp.Wpf 之前的版本。本人已知的是CEFSharp winform 45可以在xp使用。

CefSharp在C#项目中的应用：(首先引用CefSharp.dll,CefSharp.Wpf.dll 另外将icudt.dll,libcef.dll这两个Dll放置在bin/Debug或者bin/Release执行目录下)

先创建一个UserControl，并继承IRequestHandler接口，代码如下：

UI:

<UserControl x:Class=”EmbeddedWebBrowserSolution.WebPageViewer”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008”
xmlns:local=”clr-namespace:EmbeddedWebBrowserSolution”
xmlns:uc=”clr-namespace:EmbeddedWebBrowserSolution”
mc:Ignorable=”d”
d:DesignHeight=”300″ d:DesignWidth=”300″>
<Grid x:Name=”MainGrid”>
<uc:MaskLoading x:Name=”maskLoading”/>
</Grid>
</UserControl>

后台代码:

public partial class WebPageViewer : UserControl, IRequestHandler
    {
        private WebView _view;
        public WebPageViewer(string url)
        {
            InitializeComponent();
            CEF.Initialize(new Settings { LogSeverity = LogSeverity.Disable, PackLoadingDisabled = true });
            BrowserSettings browserSetting = new BrowserSettings { ApplicationCacheDisabled = true, PageCacheDisabled = true };
            _view = new WebView(string.Empty, browserSetting)
            {
                Address = url,
                RequestHandler = this,
                Background = Brushes.White
            };
            _view.LoadCompleted += _view_LoadCompleted;
            MainGrid.Children.Insert(0, _view);
        }
        private void _view_LoadCompleted(object sender, LoadCompletedEventArgs url)
        {
            Dispatcher.BeginInvoke(new Action(() => 
            {
                maskLoading.Visibility = Visibility.Collapsed;
            }));
        }
        public void View(string url)
        {
            if(_view.IsBrowserInitialized)
            {
                _view.Visibility = Visibility.Hidden;
                maskLoading.Visibility = Visibility.Visible;
                _view.Load(url);
            }
        }
        #region IRequestHandler
        public bool GetAuthCredentials(IWebBrowser browser, bool isProxy, string host, int port, string realm, string scheme, ref string username, ref string password)
        {
            return false;
        }
        public bool GetDownloadHandler(IWebBrowser browser, string mimeType, string fileName, long contentLength, ref IDownloadHandler handler)
        {
            return true;
        }
        public bool OnBeforeBrowse(IWebBrowser browser, IRequest request, NavigationType naigationvType, bool isRedirect)
        {
            return false;
        }
        public bool OnBeforeResourceLoad(IWebBrowser browser, IRequestResponse requestResponse)
        {
            return false;
        }
        public void OnResourceResponse(IWebBrowser browser, string url, int status, string statusText, string mimeType, WebHeaderCollection headers)
        {
            
        }
        #endregion
    }

 

下一步，在MainWindow上来承载，

UI:

<Grid> <DockPanel> <StackPanel DockPanel.Dock=”Top” Orientation=”Horizontal”> <TextBlock Text=”Address:” Margin=”5″/> <TextBox x:Name=”txtAddress” Width=”350″ Margin=”5″/> <Button Content=”Go” Margin=”5″ Click=”OnGoClick” IsDefault=”True”/> </StackPanel> <Grid x:Name=”MainGrid”> </Grid> </DockPanel> </Grid>
Code:

private void OnGoClick(object sender, RoutedEventArgs e)
{ string url = txtAddress.Text; if (!string.IsNullOrWhiteSpace(url))
{
WebPageViewer viewer = new WebPageViewer(url);
MainGrid.Children.Insert(0,viewer);
}
}
需要注意的是：项目目标平台Platform Target设置为X86。如果有什么问题可以参考CefSharp源代码示例Demo。

 

相比于WPF内置的WebBrowser浏览器控件，CefSharp在处理JS回掉时，比WebBrowser方便很多。例如一个HTML页面：

<!DOCTYPE html> <html> <head> <title></title> <meta charset=”utf-8″ /> <script type=”text/javascript”> function callback()
{ callbackObj.showMessage(“message from js”); } </script> </head> <body> <input type=”button” value=”Click” onclick=”callback()” ID=”Button”> </body> </html>
增加一个类，叫做：CallbackObjectForJs

public class CallbackObjectForJs
{
public void showMessage(string msg)
{
MessageBox.Show(msg);
}
}
注意这个方法的名称必须小写。

 

改造一下WebPageViewer类，在构造后WebView之后，注册一个JS对象，

public WebPageViewer(string url)
{
InitializeComponent();

CEF.Initialize(new Settings { LogSeverity = LogSeverity.Disable, PackLoadingDisabled = true });

BrowserSettings browserSetting = new BrowserSettings { ApplicationCacheDisabled = true, PageCacheDisabled = true };

_view = new WebView(string.Empty, browserSetting)
{
Address = url,
RequestHandler = this,
Background = Brushes.White
}; _view.RegisterJsObject(“callbackObj”, new CallbackObjectForJs()); _view.LoadCompleted += _view_LoadCompleted;

MainGrid.Children.Insert(0, _view);
}

运行后点击Click即可看到js弹窗的效果。这样即可轻松实现Web页面与客户端程序之间的交互。