首页 > 编程语言 >C++ MFC中嵌入web网页控件（WebBrowser、WebView2、CEF3）

C++ MFC中嵌入web网页控件（WebBrowser、WebView2、CEF3）

时间：2023-04-06 14:05:28浏览次数：55  
标签：控件 MFC return web 添加 cef webview Microsoft

1、简介

WebBrowser控件最常见的用途之一是向应用程序添加 Internet 浏览功能。使用 IWebBrowser2 接口，可以浏览到本地文件系统、网络或万维网上的任何位置。可以使用IWebBrowser2::Navigate 方法告知控件要浏览到哪个位置。第一个参数是包含位置名称的字符串。要浏览到本地文件系统或网络上的某个位置，请指定文件系统位置的完整路径或网络上该位置的 UNC 名称。若要浏览到万维网上的某个站点，请指定该站点的 URL。 在这里插入图片描述

2、WebBrowser

To add the WebBrowser control to a basic Microsoft Foundation Classes (MFC) application, perform the following steps.

  1. Right-click the Project name, and point to Add, the select Class... from the context menu.
  2. Select "MFC Class From ActiveX Control" and click Add.
  3. Select "Microsoft Web Browser" from among the classes listed in the registry. Highlight the IWebBrowser2 interface, and click the right arrow to generate a new CWebBrowser2 class.
  4. Click Finish.

2.1 新建测试项目

选择模板：Visual C++ -> MFC应用程序，如下： 在这里插入图片描述 选择：单个文档 在这里插入图片描述 创建的项目文件如下： 在这里插入图片描述

2.2 添加web控件类文件

在项目“MFCApplication9”上鼠标右键，在菜单里选择“类向导。。。” 在这里插入图片描述 在弹窗“类向导”中选择ActiveX控件中的MFC类。 在这里插入图片描述 安装如下的提示，选择Microsoft Web Browser<1.0>. 在这里插入图片描述 按照如下提示，选择IWebBrowser2。然后点击按钮完成。 在这里插入图片描述 然后自动在项目中生成控件的类文件如下： 在这里插入图片描述

2.3 添加web控件变量

在文件MFCApplication9View.h中添加代码如下：

#include "CWebBrowser2.h"

CWebBrowser2 *m_pBrowser;

在这里插入图片描述

2.4 添加窗口事件

对CMFCApplication9View视图类添加窗口事件:WM_CREATE，WM_SIZE

int CMFCApplication9View::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
	if (CView::OnCreate(lpCreateStruct) == -1)
		return -1;

	// TODO:  在此添加您专用的创建代码

	return 0;
}


void CMFCApplication9View::OnSize(UINT nType, int cx, int cy)
{
	CView::OnSize(nType, cx, cy);

	// TODO: 在此处添加消息处理程序代码
}

在这里插入图片描述 在这里插入图片描述

2.5 添加web控件实例创建代码

在上面的两个事件函数里添加对应的代码：

void CMFCApplication9View::OnSize(UINT nType, int cx, int cy)
{
	CView::OnSize(nType, cx, cy);

	if (m_pBrowser) {
		m_pBrowser->MoveWindow(0, 0, cx, cy);
	}
	// TODO: 在此处添加消息处理程序代码
}

int CMFCApplication9View::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
	if (CView::OnCreate(lpCreateStruct) == -1)
		return -1;

	// TODO:  在此添加您专用的创建代码

	// Create the control.
	m_pBrowser = new CWebBrowser2;
	ASSERT(m_pBrowser);
	if (!m_pBrowser->Create(NULL, NULL, WS_VISIBLE, CRect(0, 0, 0, 0), this, NULL))
	{
		TRACE("failed to create browser/n");
		delete m_pBrowser;
		m_pBrowser = NULL;
		return 0;
	}

	// Initialize the first URL.
	COleVariant noArg;
	CString strURL("https://image.baidu.com/");
	//CString strURL("https://cn.bing.com/");
	m_pBrowser->Navigate(strURL, &noArg, &noArg, &noArg, &noArg);
	return 0;
}

2.6 编译和运行

在这里插入图片描述 在这里插入图片描述

3、WebView2

Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge 作为绘制引擎，以在本机应用中显示 web 内容。 在这里插入图片描述

支持以下编程环境：

  • Win32 C/C++
  • .NET Framework 4.5 或更高版本
  • .NET Core 3.1 或更高版本
  • .NET 5
  • .NET 6
  • WinUI 2.0
  • WinUI 3.0

3.1 新建测试项目

新建一个MFC的项目如上。

3.2 下载和安装WebView2包

通过菜单“项目”-“管理NuGet程序包”，下载相关包。 在这里插入图片描述 在“浏览”分页的左上角的搜索栏中，键入 Microsoft.Web.WebView2。 或者，复制并粘贴下面的单行代码块。 然后选择“ Microsoft.Web.WebView2”。以及在右侧选择对应的版本，然后点击按钮安装。 在这里插入图片描述 自动弹窗下载提示框，点击确定按钮。 在这里插入图片描述 输出下载的日志信息。 在这里插入图片描述 在项目的代码文件夹里会自动创建子文件夹packages，里面保存了下载的相关包文件夹：Microsoft.Web.WebView2.1.0.902.49 在这里插入图片描述 再下另一个包：Microsoft.Windows.ImplementationLibrary。

稍后，你将安装 Windows 实现库 (WIL) - 仅限标头的 C++ 库，通过适用于 Windows COM 编码模式的可读、类型安全的 C++ 接口，使 Windows 上的开发人员的生活更加轻松。 可通过 Visual Studio 中的 解决方案资源管理器 为项目安装此 Microsoft.Windows.ImplementationLibrary 包。

在 “NuGet” 窗口中，单击“ 浏览 ”选项卡。在左上角的搜索栏中，键入 Microsoft.Windows.ImplementationLibrary。 或者，复制并粘贴下面的单行代码块。 然后选择 “Microsoft.Windows.ImplementationLibrary”。 在这里插入图片描述 同样在项目文件夹里会下载子文件夹：Microsoft.Windows.ImplementationLibrary.1.0.191107.2 在这里插入图片描述 项目文件夹的文件packages.config:

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Microsoft.Web.WebView2" version="1.0.902.49" targetFramework="native" />
  <package id="Microsoft.Windows.ImplementationLibrary" version="1.0.191107.2" targetFramework="native" />
</packages>

3.3 添加web控件代码

（1）添加变量和头文件

#include <iostream>
#include <wrl.h>
#include <wil/com.h>
#include "WebView2.h"

using namespace Microsoft::WRL;

// Pointer to WebViewController
static wil::com_ptr<ICoreWebView2Controller> webviewController;

// Pointer to WebView window
static wil::com_ptr<ICoreWebView2> webview;

在这里插入图片描述

（2）在OnCreate事件函数中添加代码：

int CMFCApplication9View::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
	if (CView::OnCreate(lpCreateStruct) == -1)
		return -1;

	HWND hWnd = this->m_hWnd;

	// TODO:  在此添加您专用的创建代码
	// <-- WebView2 sample code starts here -->
	// Step 3 - Create a single WebView within the parent window
	// Locate the browser and set up the environment for WebView
	CreateCoreWebView2EnvironmentWithOptions(nullptr, nullptr, nullptr,
		Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
			[hWnd](HRESULT result, ICoreWebView2Environment* env) -> HRESULT {

		// Create a CoreWebView2Controller and get the associated CoreWebView2 whose parent is the main window hWnd
		env->CreateCoreWebView2Controller(hWnd, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
			[hWnd](HRESULT result, ICoreWebView2Controller* controller) -> HRESULT {
			if (controller != nullptr) {
				webviewController = controller;
				webviewController->get_CoreWebView2(&webview);
			}

			// Add a few settings for the webview
			// The demo step is redundant since the values are the default settings
			wil::com_ptr<ICoreWebView2Settings> settings;
			webview->get_Settings(&settings);
			settings->put_IsScriptEnabled(TRUE);
			settings->put_AreDefaultScriptDialogsEnabled(TRUE);
			settings->put_IsWebMessageEnabled(TRUE);

			// Resize WebView to fit the bounds of the parent window
			RECT bounds;
			::GetClientRect(hWnd, &bounds);
			webviewController->put_Bounds(bounds);

			// Schedule an async task to navigate to Bing
			webview->Navigate(L"https://www.bing.com/");

			// <NavigationEvents>
			// Step 4 - Navigation events
			// register an ICoreWebView2NavigationStartingEventHandler to cancel any non-https navigation
			EventRegistrationToken token;
			webview->add_NavigationStarting(Callback<ICoreWebView2NavigationStartingEventHandler>(
				[](ICoreWebView2* webview, ICoreWebView2NavigationStartingEventArgs* args) -> HRESULT {
				wil::unique_cotaskmem_string uri;
				args->get_Uri(&uri);
				std::wstring source(uri.get());
				if (source.substr(0, 5) != L"https") {
					args->put_Cancel(true);
				}
				return S_OK;
			}).Get(), &token);
			// </NavigationEvents>

			// <Scripting>
			// Step 5 - Scripting
			// Schedule an async task to add initialization script that freezes the Object object
			webview->AddScriptToExecuteOnDocumentCreated(L"Object.freeze(Object);", nullptr);
			// Schedule an async task to get the document URL
			webview->ExecuteScript(L"window.document.URL;", Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
				[](HRESULT errorCode, LPCWSTR resultObjectAsJson) -> HRESULT {
				LPCWSTR URL = resultObjectAsJson;
				//doSomethingWithURL(URL);
				return S_OK;
			}).Get());
			// </Scripting>

			// <CommunicationHostWeb>
			// Step 6 - Communication between host and web content
			// Set an event handler for the host to return received message back to the web content
			webview->add_WebMessageReceived(Callback<ICoreWebView2WebMessageReceivedEventHandler>(
				[](ICoreWebView2* webview, ICoreWebView2WebMessageReceivedEventArgs* args) -> HRESULT {
				wil::unique_cotaskmem_string message;
				args->TryGetWebMessageAsString(&message);
				// processMessage(&message);
				webview->PostWebMessageAsString(message.get());
				return S_OK;
			}).Get(), &token);

			// Schedule an async task to add initialization script that
			// 1) Add an listener to print message from the host
			// 2) Post document URL to the host
			webview->AddScriptToExecuteOnDocumentCreated(
				L"window.chrome.webview.addEventListener(\'message\', event => alert(event.data));" \
				L"window.chrome.webview.postMessage(window.document.URL);",
				nullptr);
			// </CommunicationHostWeb>

			return S_OK;
		}).Get());
		return S_OK;
	}).Get());

	// <-- WebView2 sample code ends here -->
	return 0;
}

（3）在OnSize事件函数中添加代码：

void CMFCApplication9View::OnSize(UINT nType, int cx, int cy)
{
	CView::OnSize(nType, cx, cy);

	// TODO: 在此处添加消息处理程序代码
	if (webviewController != nullptr) {
		RECT bounds;
		GetClientRect(&bounds);
		webviewController->put_Bounds(bounds);
	};
}

3.4 编译和运行

最后运行的测试程序的界面如下： 在这里插入图片描述

4、CEF3

CEF全称Chromium Embedded Framework，是一个基于Google Chromium 的开源项目。Google Chromium项目主要是为Google Chrome应用开发的，而CEF的目标则是为第三方应用提供可嵌入浏览器支持。CEF隔离底层Chromium和Blink的复杂代码，并提供一套产品级稳定的API，发布跟踪具体Chromium版本的分支，以及二进制包。CEF的大部分特性都提供了丰富的默认实现，让使用者做尽量少的定制即可满足需求。

在这里插入图片描述

4.1 下载cef3

https://cef-builds.spotifycdn.com/index.html 在这里插入图片描述 浏览器直接搜索关键词「CEF Automated Builds」找到新的下载站点。

4.2 编译和运行cef3

对于cef来说，只需要把编译出来的libcef_dll_wrapper.lib拿来使用即可，其他文件直接包里的即可。

cef_binary_3.3578.1860.g36610bd_windows32 
或 
cef_binary_88.2.9+g5c8711a+chromium-88.0.4324.182_windows32_minimal

VisualStudio2017、2019编译非常快速，使用CMake对相关代码为例，使用CMake-gui转换，默认是64位版本（如果需要使用32位版本，转换的时候注意选择Win32），转换后的vs工程默认就是Unicode字符集MTd(MT)的，直接编译libcef_dll_wrapper即可，生成的lib拷走，其他的lib直接使用现成的。

创建成功后只编译libcef_dll_wrapper即可，其他lib和资源使用编译好的即可。 尽量链接release版本的，要链接：libcef.lib、cef_sandbox.lib、libcef_dll_wrapper 字符串要传递的时候，需转换为Unicode，可使用std::wstring转换。 cefinitialize崩溃：说明exe执行路径下缺少相关文件导致初始化失败，可以把Resources目录下的locales文件夹、icudtl.dat、cef*.pak等文件复制过来。

  • 通过cmake构建cef的vs工程。

在这里插入图片描述

  • 依次点击按钮：“Configure” -> “Generate” -> “Open Project”

在这里插入图片描述

  • 生成vs工程文件：

在这里插入图片描述 用vs2017打开解决方案文件cef.sln，如下： 在这里插入图片描述 其中cefsimple和cefclient是基于win32的实现cef3浏览器的简单示例代码，相对而言，cefsimple比较简单，代码量比较少，mfc中也主要是用这个工程中的文件。 编译和运行，其中cefclient.exe运行如下： 在这里插入图片描述

D:\cef_binary88\Release\libcef.lib
D:\cef_binary88\Release\cef_sandbox.lib
D:\cef_binary88\Release\libcef_dll_wrapper.lib

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭ 如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O??? 如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡) 感谢各位大佬童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！

标签：控件,MFC,return,web,添加,cef,webview,Microsoft
From： https://blog.51cto.com/fish/6167471

相关文章

  • 8·1Web安全攻击概述|8·3会话管理机制|8·4SQL注入攻击|8·5跨脚本攻击|8·6CSR攻击
    Web安全攻击概述web应用的概念web应用是由动态脚本，编译过的代码等组合而成它通常架设在Web服务器上，用户在Web浏览器上发送请求这些请求使用HTTP协议，由Web应用和企业后台的数据库及其他动态内容通信Web应用三层架构典型的Web应用通常是标准的三层架构模......
  • 在Android编程中，下拉刷新Webview
    1.添加支持库依赖项：在build.gradle文件中添加以下行以添加SwipeRefreshLayout支持库：implementation'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'2.在布局文件中添加SwipeRefreshLayout和WebView：<?xmlversion="1.0"encoding="utf-8"?><an......
  • C# WebApi - Basic验证实现；
    1.Filter文件夹下添加如下BasicAuthorizeAttribute类；usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;usingSystem.Web;usingSystem.Web.Http;usingSystem.Web.Security;namespaceABBPMP.WebApi.Filter{///<summary>///自定......
  • Day 22 22.1 Web自动化之selenium&pyppeteer
    web自动化随着互联网的发展，前端技术也在不断变化，数据的加载方式也不再是单纯的服务端渲染了。现在你可以看到很多网站的数据可能都是通过接口的形式传输的，或者即使不是接口那也是一些JSON的数据，然后经过JavaScript渲染得出来的。这时，如果你还用requests来爬取内容，那......
  • 界面控件开发包DevExpress v22.2.5正式发布|附高速下载
    DevExpress 拥有.NET开发需要的所有平台控件，包含600多个UI控件、报表平台、DevExpressDashboardeXpressApp框架、适用于VisualStudio的CodeRush等一系列辅助工具。屡获大奖的软件开发平台DevExpressv22.2已全新发布，该版本拥有众多新产品和数十个具有高影响力的功能，可为桌面......
  • （转）go语言web开发22 - beego框架之logs包使用
    原文：https://www.cnblogs.com/hei-ma/articles/13791609.htmlbeego框架的logs包是一个用来处理日志的库，目前支持的引擎有file（输出日志到文件）、console（终端输出）、net（输出到网络地址）、smtp（发送邮件）。 一、beego自带的日志功能（了解即可）beego有自带的日志功能（了解即可，即将被弃用......
  • 界面控件DevExtreme v23.1抢先体验，增强的UI/UX自定义功能！
    DevExtreme拥有高性能的HTML5/JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NETCore，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。本文的目的就是为了让开发者预览即将发布的DevExtreme功......
  • Javaweb简介
    JavawebWeb：全球广域网，也称万维网(www)，能通过浏览访问的网站JavaWeb：是通过用Java技术来解决相关web护网领域的技术栈网页：展现数据(前端)数据库存储数据(DBA)JavaWeb程序：逻辑处理(后端)(MYSQL)数据库：存储数据的仓库，数据是有组织的进行存储......
  • 网页端WebRTC推流转换为RTMP/GB28181等其他直播流协议
    网页端WebRTC推流转换为RTMP/GB28181等其他直播流协议WebRTC是一个在WEB浏览器端广泛应用的流媒体引擎，通过点对点的方式实现音视频数据的传输，以完成视频会议等功能。但是考虑到WebRTC主要是为有限人数情况下的点对点视频会议服务，在做其他直播应用的时候，或者接入现有流媒体网络的......
  • Cesium 案例（三） Web Map Service(WMS) Washington DC 2017
    WMSCesium.Ion.defaultAccessToken="token";   constviewer=newCesium.Viewer("cesiumContainer");   //AddaWMSimagerylayer   constlayer=newCesium.ImageryLayer(    newCesium.WebMapServiceImageryProvider({ ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99