WPF中使用CEFSharp加载网页及交互

前言

现在常用的方案

• Duilib+CEF 只支持Windows的选择，优点是打包文件小（使用C++） QQ、微信、有道精品课。
• Qt+CEF 支持跨平台，缺点是打包文件大（使用C++）。
• WPF/(WPF+CEFSharp) 打包文件小，但是性能相比前两者弱，但比Electron强，内存占用高，只支持Windows。
• Electron 打包文件大，但是性能弱，内存占用高，支持跨平台。

几种方案都各有利弊，可以根据团队的情况选用，都是相对不错的，其他的方案比如Flutter，Java就不太推荐。

目前因为C++的技术栈的原因，我们的团队主要用WPF或者是Electron来做桌面端的开发。

有些界面用web开发会更好一点，所以这里就来集成CEFSharp来加载

注意

添加CEF会大幅增加安装包大小。

为什么使用CEF

• .NET 自带的 WebBrowser 是WEB 开发人员最讨厌的 IE，性能低下而且兼容性差
• Webkit: 项目已经不再支持
• Cef 是 Chrome 内核，性能和兼容性杠杠的。缺点就是带的 DLL 太多太大，一个发布版应该在150M左右，X86+X64一块就得快300M了。另外EXE加载速度也会稍慢。

安装依赖

通过Nuget安装，右击项目 -> 管理Nuget程序包 -> 在打开的界面中搜索CefSharp，依次安装 CefSharp.Common和 CefSharp.Wpf ，至于 cef.redist.x64和 cef.redist.x86会自动安装。

配置解决方案平台

因为CefSharp不支持Any CPU所以要配置x86、x64，点击菜单 生成 -> 配置管理器。

选择解决方案平台，点击编辑，先将x64和x86删掉，再重新新建，重新配置比较容易些。

Any CPU的支持

如果我们要支持Any CPU就要自己实现了。

using System.Windows;
using System;
using System.Runtime.CompilerServices;
using CefSharp;
using System.IO;
using System.Reflection;
using System.Windows.Threading;
using CefSharpWpfDemo.Log;

namespace CEFSharpTest
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : Application
    {
        public App()
        {
            // Add Custom assembly resolver
            AppDomain.CurrentDomain.AssemblyResolve += Resolver;
            //Any CefSharp references have to be in another method with NonInlining
            // attribute so the assembly rolver has time to do it's thing.
            InitializeCefSharp();
        }

        [MethodImpl(MethodImplOptions.NoInlining)]
        private static void InitializeCefSharp()
        {
            var settings = new CefSettings();

            // Set BrowserSubProcessPath based on app bitness at runtime
            settings.BrowserSubprocessPath = Path.Combine(
                AppDomain.CurrentDomain.SetupInformation.ApplicationBase,
                Environment.Is64BitProcess ? "x64" : "x86",
                "CefSharp.BrowserSubprocess.exe"
            );

            // Make sure you set performDependencyCheck false
            Cef.Initialize(settings, performDependencyCheck: false, browserProcessHandler: null);
        }

        // Will attempt to load missing assembly from either x86 or x64 subdir
        // Required by CefSharp to load the unmanaged dependencies when running using AnyCPU
        private static Assembly Resolver(object sender, ResolveEventArgs args)
        {
            if (args.Name.StartsWith("CefSharp"))
            {
                string assemblyName = args.Name.Split(new[] { ',' }, 2)[0] + ".dll";
                string archSpecificPath = Path.Combine(
                    AppDomain.CurrentDomain.SetupInformation.ApplicationBase,
                    Environment.Is64BitProcess ? "x64" : "x86",
                    assemblyName
                );

                return File.Exists(archSpecificPath)
                    ? Assembly.LoadFile(archSpecificPath)
                    : null;
            }

            return null;
        }
    }
}

使用

使用时可以直接在xaml文件中直接添加ChromiumWebBrowser控件，不过ChromiumWebBrowser控件特别消耗内存，所以代码里动态添加也是一种不错的选择。

在xaml中添加浏览器

xmal文件头部插入引用

xmlns:wpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"

添加控件如下：

<Grid x:Name="ctrlBrowerGrid">
    <wpf:ChromiumWebBrowser x:Name="Browser"/>
</Grid>

cs文件中操作控件访问网址：

Browser.Load("https://www.psvmc.cn");

代码添加浏览器

添加浏览器类：

using CefSharp.Wpf;

using System.ComponentModel;
using System.Windows;

namespace CEFSharpTest.view
{
    internal sealed class CollapsableChromiumWebBrowser : ChromiumWebBrowser
    {
        public CollapsableChromiumWebBrowser()
        {
            Loaded += BrowserLoaded;
        }

        private void BrowserLoaded(object sender, RoutedEventArgs e)
        {
            // Avoid loading CEF in designer
            if (DesignerProperties.GetIsInDesignMode(this)) {
                return;
            }
            // Avoid NRE in AbstractRenderHandler.OnPaint
            ApplyTemplate();
        }
    }
}

动态添加和操作控件：

private CollapsableChromiumWebBrowser MyBrowser = null;
private void InitWebBrower() {
    MyBrowser = new CollapsableChromiumWebBrowser();
    //页面插入控件
    ctrlBrowerGrid.Children.Add(MyBrowser);
    //这里不能用Load()的方法，会报错。
    MyBrowser.Address = "https://www.psvmc.cn";
}

获取Cookie和Html

添加Cookie访问类

using CefSharp;

using System;

namespace CEFSharpTest.view
{
    public class CookieVisitor : ICookieVisitor
    {
        private string Cookies = null;

        public event Action<object> Action;

        public bool Visit(Cookie cookie, int count, int total, ref bool deleteCookie)
        {
            if (count == 0)
                Cookies = null;

            Cookies += cookie.Name + "=" + cookie.Value + ";";
            deleteCookie = false;
            return true;
        }

        public void Dispose()
        {
            if (Action != null)
                Action(Cookies);
            return;
        }
    }
}

浏览器控件访问网址，并设置回调

private CollapsableChromiumWebBrowser MyBrowser = null;

private void InitWebBrower()
{
    MyBrowser = new CollapsableChromiumWebBrowser();
    //页面插入控件
    ctrlBrowerGrid.Children.Add(MyBrowser);
    MyBrowser.FrameLoadEnd += Browser_FrameLoadEnd;
    //这里不能用Load()的方法，会报错。
    MyBrowser.Address = "https://www.psvmc.cn";
}

private async void Browser_FrameLoadEnd(object sender, FrameLoadEndEventArgs e)
{
    CookieVisitor visitor = new CookieVisitor();
    string html = await MyBrowser.GetSourceAsync();
    Console.WriteLine("html:" + html);
    visitor.Action += RecieveCookie;
    Cef.GetGlobalCookieManager().VisitAllCookies(visitor);
    return;
}

public async void RecieveCookie(object data)
{
    string cookies = (string)data;
    Console.WriteLine("cookies:" + cookies);
    return;
}

加载本地页面和JS回调

添加HTML

项目下添加html路径html\index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function callback() {
            callbackObj.showMessage('message from js');
        }

        function alert_msg(msg) {
            alert(msg);
        }
    </script>
</head>
<body>
    <button onclick="callback()">Click</button>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f3f3f3;
            width: 100vw;
            height: 100vh;
            display:flex;
            align-items:center;
            justify-content:center;
        }
    </style>
</body>
</html>

复制页面到目标目录

方式1

项目->属性->生成事件->生成前事件命令行

添加如下

xcopy /Y /i /e $(ProjectDir)\html $(TargetDir)\html

方式2

文件右键点击属性，设置复制到输出目录和生成操作。

如果文件较多建议用方式1 。

代码

注册一个JS对象

private ChromiumWebBrowser MyBrowser = null;

private void InitWebBrower()
{
    CefSettings cSettings = new CefSettings()
    {
        Locale = "zh-CN",
        CachePath = Directory.GetCurrentDirectory() + @"\Cache"
    };
    cSettings.MultiThreadedMessageLoop = true;
    cSettings.CefCommandLineArgs.Add("proxy-auto-detect", "0");
    cSettings.CefCommandLineArgs.Add("--disable-web-security", "");
    //Disable GPU acceleration
    cSettings.CefCommandLineArgs.Add("disable-gpu");
    //Disable GPU vsync
    cSettings.CefCommandLineArgs.Add("disable-gpu-vsync");
    //此配置可以允许摄像头打开摄像
    cSettings.CefCommandLineArgs.Add("enable-media-stream", "1");
    Cef.Initialize(cSettings);

    string pagepath = string.Format(@"{0}html\index.html", AppDomain.CurrentDomain.BaseDirectory);

    if (!File.Exists(pagepath))
    {
        MessageBox.Show("HTML不存在: " + pagepath);
        return;
    }

    // Create a browser component
    MyBrowser = new ChromiumWebBrowser();

    //禁用右键菜单
    MyBrowser.MenuHandler = new MenuHandler();

    //禁用弹窗
    MyBrowser.LifeSpanHandler = new LifeSpanHandler();

    MyBrowser.Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#f3f3f3"));
    //页面插入控件
    ctrlBrowerGrid.Children.Add(MyBrowser);

    MyBrowser.Address = pagepath;

    MyBrowser.JavascriptObjectRepository.Settings.LegacyBindingEnabled = true;
    MyBrowser.JavascriptObjectRepository.Register(
        "callbackObj", 
        new CallbackObjectForJs(),
        isAsync: true, 
        options: BindingOptions.DefaultBinder
    );
}

调用JS方法

private void Button_Click(object sender, RoutedEventArgs e)
{
    MyBrowser.ExecuteScriptAsync("alert_msg('123')");
}

事件回调类

public class CallbackObjectForJs
{
    public void showMessage(string msg)
    {
        MessageBox.Show(msg);
    }
}

禁用右键菜单的类

public class MenuHandler : IContextMenuHandler
{
    public void OnBeforeContextMenu(
        IWebBrowser browserControl, 
        IBrowser browser, 
        IFrame frame, 
        IContextMenuParams parameters, 
        IMenuModel model
    )
    {
        model.Clear();
    }

    public bool OnContextMenuCommand(
        IWebBrowser browserControl, 
        IBrowser browser, 
        IFrame frame, 
        IContextMenuParams parameters, 
        CefMenuCommand commandId, 
        CefEventFlags eventFlags
    )
    {
        return false;
    }

    public void OnContextMenuDismissed(IWebBrowser browserControl, IBrowser browser, IFrame frame)
    {
    }

    public bool RunContextMenu(
        IWebBrowser browserControl,
        IBrowser browser, 
        IFrame frame, 
        IContextMenuParams parameters, 
        IMenuModel model, 
        IRunContextMenuCallback callback
    )
    {
        return false;
    }
}

原窗口打开链接的类

public class LifeSpanHandler : ILifeSpanHandler
{
    //弹出前触发的事件
    public bool OnBeforePopup(
        IWebBrowser webBrowser, 
        IBrowser browser, 
        IFrame frame,
        string targetUrl,
        string targetFrameName, 
        WindowOpenDisposition targetDisposition, 
        bool userGesture, 
        IPopupFeatures popupFeatures,
        IWindowInfo windowInfo, 
        IBrowserSettings browserSettings, 
        ref bool noJavascriptAccess, 
        out IWebBrowser newBrowser)
    {
        //使用源窗口打开链接，取消创建新窗口
        newBrowser = null;
        var chromiumWebBrowser = (ChromiumWebBrowser)webBrowser;
        chromiumWebBrowser.Load(targetUrl);
        return true;
    }

    public void OnAfterCreated(IWebBrowser chromiumWebBrowser, IBrowser browser)
    {
    }

    public bool DoClose(IWebBrowser chromiumWebBrowser, IBrowser browser)
    {
        return true;
    }

    public void OnBeforeClose(IWebBrowser chromiumWebBrowser, IBrowser browser)
    {
    }
}

注意项

API变更

//Old Method
MyBrowser.RegisterAsyncJsObject("callbackObj", new CallbackObjectForJs(), options: BindingOptions.DefaultBinder);

//Replaced with
MyBrowser.JavascriptObjectRepository.Settings.LegacyBindingEnabled = true;
MyBrowser.JavascriptObjectRepository.Register("callbackObj", new CallbackObjectForJs(), isAsync: true, options: BindingOptions.DefaultBinder);

本地文件路径

文件路径中不能包含特殊字符，否则不能加载，之前我的项目在C#目录下，就一直加载不了页面。