WPF框架中使用CefSharp嵌入web浏览器的方法教程

YPE html>

首先先介绍一下CefSharp嵌入式浏览器，它是基于Google浏览器的一个组件，我们可以在WPF/WinForm客户端软件中使用它。CefSharp的代码托管在GitHub上，.NET (WPF and Windows Forms) bindings for the Chromium Embedded Framework。

目前最新版本的CefSharp是41.0版本，如果你的客户端软件需要支持WIN XP操作系统，建议使用CefSharp.Wpf 1.25.7及之前的版本。可以从Nuget上获取到具体的内容。在新版本的CefSharp中，已经取消了对WIN XP系统的支持。

具体的实现：(首先引用CefSharp.dll,CefSharp.Wpf.dll 另外将icudt.dll,libcef.dll这两个Dll放置在bin/Debug或者bin/Release目录下)

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

UI:

Code:

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:

    
        
            
            
            
        
        
            
        
    

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来承载Web页面的例子就算完成了。


相比于WPF内置的WebBrowser，CefSharp在处理JS回掉时，比WebBrowser方便很多。请看下面的例子：

我们有这样一个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);
}   
//...

运行效果如下：

通过这样的方式，我们可以很好的实现Web页面与客户端程序之间的交互。



使用CefSharp在.Net程序中嵌入Chrome浏览器

有的时候，我们需要在程序中嵌入Web浏览器，其实.Net Framework中本身就提供了WebBrowser控件，本身这个是最简单易用的方案，但不知道是什么原因，这个控件在浏览网页的时候有些莫名的卡顿，有的时候甚至能达到好几秒，严重影响体验。

这个时候，我们可以考虑使用第三方浏览器来代替系统的WebBrowser，常见的方案是使用版本帝Chrome，Chrome本身提供了供第三方程序嵌入的方案Chromium Embedded Framework (CEF)，但这个是C++的接口，在.Net程序中使用还是有一定的工作量的。不过目前已经有一些开源的项目完成了这一封装，其中的一个佼佼者就是CefSharp，WPF和WinForm的封装都实现了，本文就简单的介绍一下如何在WPF程序中使用CefSharp来嵌入Chrome浏览器。

安装：

安装的过程非常简单，只要使用NuGet安装CefSharp.Wpf即可。

PM> Install-Package CefSharp.Wpf

安装过程本身比较常规，不过值得一提的是，这个包非常大，由于集成了x86和x64的版本，整个包（加上几个依赖的包）达到了200多mb，基于众所周知的原因，和Nuget的访问一直不大通畅，有时还抽风整个过程非常漫长，一定要有足够的耐心以及人品。

修改编译选项：

由于Chrome是原生程序，目前CefSharp还不能做到32位和64位自动识别，不能使用默认的AnyCPU的编译选项，需要修改一下配置管理器，改成x86或x64才行。

使用：

使用的过程比较简单，直接使用如下代码即可。

private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
var setting = new CefSharp.CefSettings();
CefSharp.Cef.Initialize(setting, true, false);

var webView = new CefSharp.Wpf.ChromiumWebBrowser();
this.Content = webView;

webView.Address = "http://www.c*nb*l*ogs.com/TianFang/";
}

我们可以看到在使用Chrome控件前，有如下一个操作：

var setting = new CefSharp.CefSettings();
CefSharp.Cef.Initialize(setting, true, false);

这个setting变量就是用来存放chrome的全局设置的地方，当需要进行设置的时候，只需要对它进行修改即可。例如，我们要修改缓存目录，只需要如下设置即可：

var setting = new CefSharp.CefSettings()
{
CachePath = Directory.GetCurrentDirectory() + @"Cache",
};

另外，有的设置是通过启动参数传入的，这些启动参数存放在CefCommandLineArgs成员中了，通过字符串的形式传入。例如，我们要给Chrome程序加一个代理服务器，则可以修改如下：

setting.CefCommandLineArgs.Add("--proxy-server", "http://127.0.***0.1:8877");