CEF：MFC 对话框 Demo（VS2013）

最新推荐文章于 2022-03-21 10:42:25 发布
最新推荐文章于 2022-03-21 10:42:25 发布
阅读量1.1w 收藏 48
点赞数 10
分类专栏： CEF 文章标签： CEF MFC
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blackwoodcliff/article/details/74276848
版权

　　随着 HTML5 的崛起和 IE 的淘汰，微软 Web Browser 控件越来越不合时宜，CEF (Chromium Embedded Framework) 越来越受欢迎。但 CEF 使用起来比 Web Browser 复杂的多，而且它的官方例子 cefsimple 和 cefclient 都是使用 Win32 API 开发的，这给大家学习使用 CEF 带来了很大不便，很多人更需要一个使用 MFC 开发的例子。

  • CEF 版本：cef_binary_3.2623.1395.g3034273_windows32
  • 开发工具：Visual Studio 2013

下载 CEF

　　获得 CEF 有两种方法，一种是下载源码自己编译，另一种是直接下载编译好的二进制文件。自己编译 CEF 源码太麻烦了，可谓困难重重，有兴趣的同学可以看这里：BranchesAndBuilding。
　　毫不犹豫的放弃自己编译的念头后，就只剩第二种方法了。网上常见的下载 CEF Binary 的地方是 http://cefbuilds.com 和 http://opensource.spotify.com/cefbuilds/index.html，但这两个地方现在都连不上了。最后只好求助 CSDN：
　　cef_binary_3.2623.1395.g3034273_windows32.part1
　　cef_binary_3.2623.1395.g3034273_windows32.part2

编译 libcef_dll_wrapper

　　libcef.dll 提供的是 C 接口。我们既然都已经使用 MFC 了，当然更想用 C++ 接口，不幸的是，这需要自己编译。编译方法如下：
　　首先，下载一个 CMake，下载地址在这里：cmake-3.8.2-win32-x86.msi
　　下载之后安装，安装之后运行 CMake (cmake-gui)。
　　把刚才下载的 cef_binary_3.2623.1395.g3034273_windows32 解压到 D: 盘根目录。
　　在 CMake 界面上分别点击 [Browse Source…] 和 [Browse Build…] 按钮，选择刚才解压 CEF 的目录，如下图：
　　这里写图片描述
　　再点击 [Generate] 按钮，在弹出的窗口上选择“Visual Studio 12 2013”，如下图：
　　这里写图片描述
　　然后点击窗口下面的 [Finish] 按钮，生成 VS2013 解决方案。
　　等待一小会儿，生成完毕后的窗口如下所示，在窗口底部显示出了“Generating done”字样。
　　这里写图片描述
　　这时，在 D:\cef_binary_3.2623.1395.g3034273_windows32 文件夹里生成了 cef.sln 文件。
　　启动 Visual Studio 2013，打开刚才生成的 cef.sln 文件。打开 cef.sln 后的 VS2013 界面如下图：
　　这里写图片描述
　　在“解决方案资源管理器”里，在“libcef_dll_wrapper”项目上点击鼠标右键，然后在弹出菜单上点击“生成(U)”项，编译生成 libcef_dll_wrapper。
　　等一会儿后（等待时间长短依电脑性能而不同），就生成了 Debug 版的 libcef_dll_wrapper.lib。
　　然后，在工具栏里，把“解决方案配置”改为“Release”，再在“libcef_dll_wrapper”项目上点击鼠标右键，在弹出菜单上点击“生成(U)”项，编译生成 Release 版的 libcef_dll_wrapper。
　　最后，生成的 Debug 版和 Release 版的 libcef_dll_wrapper 分别位于 D:\cef_binary_3.2623.1395.g3034273_windows32\libcef_dll\Debug\libcef_dll_wrapper.lib 和 D:\cef_binary_3.2623.1395.g3034273_windows32\libcef_dll\Release\libcef_dll_wrapper.lib。
　　至此，准备工作就已经完成了。

创建 MFC 对话框项目

　　关闭刚才的 Visual Studio 2013，再重新启动一个 Visual Studio 2013。
　　点击菜单 [文件(F)->新建(N)->项目(P)…]，打开“新建项目”对话框，在左侧选择 [已安装->模板->Visual C++->MFC]，然后选择中间的“MFC 应用程序”，项目名称输入 CefMfcDemo，位置选择 D:\，如下图：
　　这里写图片描述
　　点击 [确定] 按钮，进入 MFC 应用程序向导，再点击 [下一步] 按钮，进入“应用程序类型”选择界面。选择“基于对话框”和“在静态库中使用 MFC”，如下图：
　　这里写图片描述
　　点击 [下一步]，进入“用户界面功能”选择页，选择项目如下图：
　　这里写图片描述
　　点击 [下一步]，进入“高级功能”界面，只选择“公共控件清单”就好，如下图：
　　这里写图片描述
　　点击 [下一步]，进入“生成的类”界面，这里面不需要改什么，直接点击 [完成] 按钮，生成 CefMfcDemo 项目。
　　生成项目后，对话框界面编辑器会自动打开，如下图：
　　这里写图片描述
　　把界面上的“TODO: ”标签、“确定”、“取消”按钮都删掉。（删完之后记得保存）

修改项目属性

　　在“解决方案资源管理器”里，在项目名称“CefMfcDemo”上点击鼠标右键，然后在弹出菜单上点击“属性(R)”项，打开“CefMfcDemo 属性页”窗口。改变“配置”为“所有配置”，选择 [配置属性->VC++ 目录]，把 D:\cef_binary_3.2623.1395.g3034273_windows32 添加到“包含目录”，然后点击 [确定] 按钮关闭窗口。
　　这里写图片描述
　　重新打开属性页窗口，改变“配置”为“Debug”，选择 [配置属性->VC++ 目录]，把 D:\cef_binary_3.2623.1395.g3034273_windows32\Debug 添加到“库目录”，然后点击 [确定] 按钮关闭窗口。
　　这里写图片描述
　　重新打开属性页窗口，改变“配置”为“Release”，选择 [配置属性->VC++ 目录]，把 D:\cef_binary_3.2623.1395.g3034273_windows32\Release 添加到“库目录”，然后点击 [确定] 按钮关闭窗口。
　　这里写图片描述
　　重新打开属性页窗口，改变“配置”为“所有配置”，选择 [配置属性->C/C++->预编译头]，将“预编译头”改为“不使用预编译头”，然后点击 [确定] 按钮关闭窗口。
　　这里写图片描述
　　重新打开属性页窗口，改变“配置”为“所有配置”，选择 [配置属性->链接器->输入]，把 libcef.lib 和 libcef_dll_wrapper.lib 添加到“附加依赖项”，然后点击 [确定] 按钮关闭窗口。
　　这里写图片描述

添加 CefClient 派生类

　　在“解决方案资源管理器”里，在项目名称“CefMfcDemo”上点击鼠标右键，然后在弹出菜单上选择“添加(D)->类(C)…”项，打开“添加类”窗口，在左侧选择“已安装->Visual C++ ->C++”，再选择中间的“C++ 类”，然后点击 [添加(A)] 按钮，进入“一般 C++ 类向导”窗口。在“类名(L)”里输入 CSimpleClient，然后点击 [完成] 按钮，生成 CSimpleClient 类。
　　这里写图片描述
　　修改 SimpleClient.h 文件内容如下：

#pragma once

#include "include/cef_client.h"

class CSimpleClient : public CefClient, public CefLifeSpanHandler
{
public:
    CSimpleClient();
    ~CSimpleClient();

    virtual CefRefPtr<CefLifeSpanHandler> GetLifeSpanHandler() OVERRIDE
    { return this; }

    // CefLifeSpanHandler methods:
    virtual void OnAfterCreated(CefRefPtr<CefBrowser> browser) OVERRIDE;

    CefRefPtr<CefBrowser> GetBrowser() { return m_cefBrowser; }

private:
    CefRefPtr<CefBrowser> m_cefBrowser;

    IMPLEMENT_REFCOUNTING(CSimpleClient);
};

　　在 SimpleClient.cpp 文件里添加如下函数：

void CSimpleClient::OnAfterCreated(CefRefPtr<CefBrowser> browser)
{
    m_cefBrowser = browser;
}

修改 CCefMfcDemoDlg 类，创建浏览器

　　首先打开 CefMfcDemoDlg.h 文件，在 #pragma once 下面添加 #include "SimpleClient.h"。然后再添加 public 成员变量：CefRefPtr<CSimpleClient> m_simpleClient;。
　　接着打开 CefMfcDemoDlg.cpp 文件，先在顶部添加 #include "include/cef_app.h"，再在 OnInitDialog() 函数里添加如下代码：

    CefRefPtr<CSimpleClient> client(new CSimpleClient());
    m_simpleClient = client;

    CefSettings settings;
    CefSettingsTraits::init(&settings);
    settings.multi_threaded_message_loop = true;

    CefMainArgs mainArgs;
    CefRefPtr<CefApp> cefApp;
    CefInitialize(mainArgs, settings, cefApp, NULL);

    RECT rect;
    GetClientRect(&rect);
    RECT rectnew = rect;
    rectnew.top = rect.top + 50;
    rectnew.bottom = rect.bottom;
    rectnew.left = rect.left;
    rectnew.right = rect.right;

    CefWindowInfo winInfo;
    winInfo.SetAsChild(GetSafeHwnd(), rectnew);

    CefBrowserSettings browserSettings;
    CefBrowserHost::CreateBrowser(winInfo, client, _T("http://www.baidu.com"), browserSettings, NULL);

处理对话框的 WM_CLOSE 消息，关闭浏览器

　　点击菜单 [视图(V)->类视图(A)]，打开“类视图”窗口，展开“CefMfcDemo”节点，在类 CCefMfcDemoDlg 上点击鼠标右键，然后在弹出菜单上点击“属性(R)”项，打开“属性”窗口。在“属性”窗口工具栏上，点击“消息”图标，切换到对话框消息界面。选中 WM_CLOSE 消息，点击右侧箭头打开下拉框，点击 <add> OnClose 添加 WM_CLOSE 消息处理函数。然后光标会自动定位到刚添加的 OnClose() 函数上，在函数里添加 CefShutdown();。
　　这里写图片描述
　　至此，在 MFC 对话框里嵌入 CEF 所需的代码就基本完成了。

编译程序

　　点击菜单 [调试(D)->开始执行(不调试)(H)]，编译并运行程序，这时会出现错误信息 无法打开文件“libcef_dll_wrapper.lib”，其实这个文件我们在第二步早已经生成了。
　　把 D:\cef_binary_3.2623.1395.g3034273_windows32\libcef_dll\Debug\libcef_dll_wrapper.lib 复制到 D:\cef_binary_3.2623.1395.g3034273_windows32\Debug 下面，把 D:\cef_binary_3.2623.1395.g3034273_windows32\libcef_dll\Release\libcef_dll_wrapper.lib 复制到 D:\cef_binary_3.2623.1395.g3034273_windows32\Release 下面，然后再次点击 [调试(D)->开始执行(不调试)(H)]，这次不会出现找不到 libcef_dll_wrapper.lib 文件的错误了，但又出现了新的错误，如下图：
　　这里写图片描述
　　实际到这一步，程序已经编译成功了，只是还缺少一些文件无法运行。

运行程序

  • 把 D:\cef_binary_3.2623.1395.g3034273_windows32\Debug 里的所有文件（*.lib 文件除外）复制到 D:\CefMfcDemo\Debug 下面；
  • 把 D:\cef_binary_3.2623.1395.g3034273_windows32\Release 里的所有文件（*.lib 文件除外）复制到 D:\CefMfcDemo\Release 下面；
  • 把 D:\cef_binary_3.2623.1395.g3034273_windows32\Resources 里面的所有子文件夹及文件全部复制到 D:\CefMfcDemo\Debug 下面；
  • 把 D:\cef_binary_3.2623.1395.g3034273_windows32\Resources 里面的所有子文件夹及文件全部复制到 D:\CefMfcDemo\Release 下面。
    　　然后再次点击 [调试(D)->开始执行(不调试)(H)]，程序运行如下图：
    　　这里写图片描述
    　　至此，就实现了一个完整的使用 MFC 开发的 CEF 程序。

　　可是这个程序有点儿太粗糙了，对于完美主义者是无法接受的。好吧，就再多做点儿吧。

处理 WM_SIZE 消息

　　像添加 WM_CLOSE 消息处理函数一样，添加 WM_SIZE 消息处理函数 OnSize()。然后在 OnSize() 函数里添加如下代码：

    RECT rect;
    GetClientRect(&rect);

    if (m_simpleClient.get())
    {
        CefRefPtr<CefBrowser> browser = m_simpleClient->GetBrowser();
        if (browser)
        {
            CefWindowHandle hwnd = browser->GetHost()->GetWindowHandle();
            ::MoveWindow(hwnd, 0, 50, rect.right - rect.left, rect.bottom - 50, true);
        }
    }

添加网址输入框

　　点击菜单 [视图(V)->其他窗口(E)->资源视图(R)]，打开“资源视图”窗口，依次展开“CefMfcDemo->CefMfcDemo.rc->Dialog”节点，双击 IDD_CEFMFCDEMO_DIALOG，打开对话框界面编辑窗口。
　　在对话框顶部添加一个 Edit Control 和一个 Button，修改 Edit Control 的 ID 为 IDC_EDIT_URL，修改 Button 的 ID 为 IDC_BTN_GO，修改 Button 的 Caption 为 Go，完成后的界面如下图：
　　这里写图片描述
　　在 Go 按钮上点击鼠标右键，然后在弹出菜单上点击“添加事件处理程序(A)…”项，打开“事件处理程序向导”窗口。
　　这里写图片描述
　　不做任何改动，直接点击 [添加编辑(A)] 按钮，然后光标会自动定位到刚添加的 OnBnClickedBtnGo() 函数上，在函数里添加如下代码：

    CString strUrl;
    GetDlgItem(IDC_EDIT_URL)->GetWindowText(strUrl);
    if (strUrl.Trim().IsEmpty())
    {
        AfxMessageBox(_T("请输入网址"));
        return;
    }
    const CefString cefStrUrl(strUrl);
    m_simpleClient->GetBrowser()->GetMainFrame()->LoadURL(cefStrUrl);

　　好了，运行程序吧，PERFECT！
　　
参考：MFC对话框应用程序中谷歌CEF浏览器内核的使用
　　　关于MFC中如何使用CEF内核
　　　cefsimple 源码

源码下载：http://download.csdn.net/download/blackwoodcliff/9898152

blackwood-cliff
关注
  • 10
    点赞
  • 踩
  • 48
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
专栏目录
java-cef / 编译V49为Windows平台
orange2211的专栏
04-19 2569
java-cef / 编译V49为Windows平台 View History 注意： 为了描述详尽，下方图片很多，请注意流量或CPU使用率。 另外由于markdown的特性，超链接都在本页打开，请右键新标签页打开。 本文中的示例使用win64平台，定然无法用于xp，但当您使用32位jdk并使用32位cef编译出32位jni时，即可用于XP * 准备
cef_binary_3.2623.1395.g3034273_windows32
09-07
cef_binary_3.2623.1395.g3034273_windows32在WindowsXP编译的库文件和源码
libcef-案例展示-将cef浏览器嵌入到mfc中作为子窗口运行
插件开发
03-21 3029
文章目录1.新建MFC项目2.添加cefsimple中的文件3.取消预编译头文件4.添加包含文件和库文件4.1 头文件夹4.2 库文件夹5.修改部分错误5.1 编译错误6.添加代码6.1.修改浏览器窗口位置6.2.目标位置加入代码7.加入manifest文件8.最终效果9.作者申明   MFC作为传统的C++框架，在许多现有的windows应用程序中，还是大量存在，在如今的互联网世界里，web已经成为了不可或缺的一环，通过html5展示页面是一种非常方便而有效的技术。这样，将浏览器作为一个子窗口嵌入到mfc
CEF融入MFC
CAir2的专栏
12-17 1834
前面我们分析了CefSample的代码，那么现在我们将基于MFC的Dialog做一个简单的CefDemo模型。 CefSample使用的是Cef自己的消息环CefRunMessageLoop。但是在使用MFC的时候，MFC有自己的消息环，所以我们不能再使用CefRunMessageLoop，所以我们需要在MFC的消息环里面处理Cef的消息，代码如下，重写虚函数PumpMessage： BOOL C...
VS2019 MFC中使用CEF
replayb的博客
07-01 2134
VS2019 MFC中使用CEF Chromium Embedded Framework (CEF)是基于Google Chromium项目的开源Web browser控件，支持Windows, Linux, Mac平台。 软件环境： Windows 10家庭版 Visual Studio 2019 CEF 83.3.11+g1fac1e5+chromium-83.0.4103.61 / Chromium 83.0.4103.61，这个版本的Debug与VS2017有些不兼容，只能使用Release方式编译
cef嵌入MFC对话框DEMO
05-16
完整代码，解决完崩溃、进程关闭不了等问题。
MFC对话框使用CEF浏览器内核vs2012可编译运行
07-11
CEF功能强大 但使用起来比 Web Browser 复杂的多，而且它的官方例子 cefsimple 和 cefclient 都是使用 Win32 API 开发的，这给大家学习使用 CEF 带来了很大不便，很多人更需要一个使用 MFC 开发的例子，所以上传这个...
CEF：进程间通信 Demo（VS2013）
01-23
CEF 进程间通信 Demo（VS2013）源码，详细步骤请见博客文章 http://blog.csdn.net/blackwoodcliff/article/details/78917001
cef3.2623 dll、lib、pdb、头文件(包含release、edbug、x64版本).rar
02-22
cef3.2623 dll、lib、pdb、头文件(包含release、edbug、x64版本).rar
cef_binary_3.2526 windows32 官网下载
10-28
官网下载，提供给不能使用google而不能下载的coder，因为文件超限，所有删掉了Debug下面的libcef.dll,如果一定要使用这个，请在http://bbs.qcdest.com/IT/20151025588.html 下载。
cef_binary_3.2623.1401.gb90a3be
08-31
项目libcef(https://github.com/sanwer/libcef.git)附件，版本cef_binary_3.2623.1401.gb90a3be，支持Mp3、Mp4。
cef_binary_3.3071.1611.g4a19305_windows64.zip
03-24
ue4 cef3添加h264支持
cef_binary_3.2357
05-29
cef_binary_3.2357官网下载，提供给因google访问不了而无法下载的coder
cef3 mfc测试demo windows vs2015工程
03-21
cef3 mfc 测试demo windows vs2015工程 windows vs2015中mfc开发的嵌入式浏览器DEMO，完整工程，包含了库文件libcef_dll_wrapper.lib和libcef.lib。 1、库版本为cef_binary_3.2704.1414.g185cd6c_windows32，引用...
(转)关于MFC中如何使用CEF内核（CEF初解析）
rathome的博客
12-20 4859
了关于CEF内核基本使用用法
VS2019 VC++ MFC CEF(Chrome)开发环境搭建及相关功能demo（附源码）
刘朋
08-27 6703
本文章主要介绍CEF如何作为一个控件，加在MFC的窗体中，并实现一些功能，如：打开指定网址、刷新、后退关闭子窗口或页签、关闭全部页签/子窗口和主窗体、浏览器界面自适应窗口大小等等，也会交代会遇到的一些坑的处理办法，最终会附上整个项目的源码。
CEF学习小记（二）-如何使浏览器窗口随对话框一起缩放
yitucom123的专栏
10-27 7466
通过上一篇文章，已经可以浏览网页了，但有一个问题，就是那最大化对话框后，网页的浏览区域并没有变，如何让浏览区域变化呢？
cef3集成 mfc多文档demo
最新发布
06-07
很抱歉，我没有现成的 CEF3 集成 MFC 多文档的 demo。不过，下面是一个简单的示例，可以帮助你了解如何将 CEF3 集成到 MFC 多文档应用程序中。 1. 下载 CEF3 的最新版本，并解压到本地。 2. 在 MFC 应用程序中添加一个 WebBrowser 控件（可以通过“工具箱”中的“WebBrowser”工具添加）。 3. 在 WebBrowser 控件的创建事件中，创建一个 CefBrowser 对象，并将其绑定到 WebBrowser 控件上。示例代码如下： ```c++ // 在 MFC 应用程序的某个类中添加以下代码： CefRefPtr<CefBrowser> m_pBrowser; // 声明 CefBrowser 对象 // 在 WebBrowser 控件的创建事件中添加以下代码： CefMainArgs mainArgs; // CEF 的主要参数 CefRefPtr<CefApp> app; // CEF 应用程序对象（自定义） CefSettings settings; // CEF 的设置选项 CefInitialize(mainArgs, settings, app); // 初始化 CEF CefWindowInfo windowInfo; // CEF 窗口信息 windowInfo.SetAsChild(m_hWnd, rect); // 将 CEF 窗口绑定到 WebBrowser 控件 CefBrowserSettings browserSettings; // CEF 浏览器设置 m_pBrowser = CefBrowserHost::CreateBrowserSync(windowInfo, handler.get(), url, browserSettings, nullptr); // 创建 CefBrowser 对象，并绑定到 WebBrowser 控件 ``` 4. 在 MFC 应用程序中添加一个自定义文档类（比如 CMyHtmlDoc），用于加载和显示 HTML 页面。 5. 在 CMyHtmlDoc 的 OnNewDocument() 函数中，创建一个 CefFrame 对象，将其绑定到 CefBrowser 对象上，然后使用 CefFrame::LoadURL() 函数加载 HTML 页面。示例代码如下： ```c++ // CMyHtmlDoc::OnNewDocument() 函数 CefRefPtr<CefFrame> frame = m_pBrowser->GetMainFrame(); // 获取 CefBrowser 的主框架 frame->LoadURL(url); // 加载 HTML 页面 ``` 6. 在 CMyHtmlDoc 的 OnDraw() 函数中，使用 CefBrowser::GetImage() 函数获取 HTML 页面的截图，并在文档视图中显示。示例代码如下： ```c++ // CMyHtmlDoc::OnDraw() 函数 CefRefPtr<CefBrowser> browser = GetBrowser(); // 获取 CefBrowser 对象 CefRefPtr<CefBrowserHost> host = browser->GetHost(); // 获取 CefBrowserHost 对象 CefRect rect(0, 0, host->GetWindowHandle(), host->GetWindowHandle()); // 截图区域 CefRefPtr<CefBrowser> image = host->GetImage(PET_VIEW, 1, rect); // 获取截图 CefRefPtr<CefImage> cefImage = image->GetImage(); // 获取 CefImage 对象 HBITMAP hBitmap = cefImage->GetHBITMAP(1.0, false, false); // 将 CefImage 转换为 HBITMAP CDC* pDC = GetDC(); // 获取文档视图的设备上下文 CBitmap bitmap; bitmap.Attach(hBitmap); CBrush brush; brush.CreatePatternBrush(&bitmap); pDC->FillRect(&m_rectDraw, &brush); // 在文档视图中显示截图 ReleaseDC(pDC); ``` 以上代码仅供参考，具体实现细节可能因应用程序的需求而有所不同。希望这些信息对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值