MFC使用 Microsoft Edge Web View2 浏览器控件显示网页

最新推荐文章于 2024-09-19 11:44:05 发布
最新推荐文章于 2024-09-19 11:44:05 发布
阅读量1.6k 收藏 14
点赞数 19
分类专栏： C/C++ 文章标签： 前端 mfc microsoft
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mageriletu2012/article/details/140233810
版权

Web View2

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

MFC使用WebView2显示网页内容

1.1 新建项目

在这里插入图片描述

1.2 下载和安装Web View2包

通过菜单“项目”-“管理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.1901.177" targetFramework="native" />
  <package id="Microsoft.Windows.ImplementationLibrary" version="1.0.230629.1" targetFramework="native" />
</packages>

1.3 添加依赖项

工程–>右键–>生成依赖项(B)。
在这里插入图片描述
在这里插入图片描述

1.4 添加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;
}

如果是对话框项目，则在OnInitDialog事件函数中添加代码。

BOOL CMFCWebView2Dlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// 将“关于...”菜单项添加到系统菜单中。

	// IDM_ABOUTBOX 必须在系统命令范围内。
	ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX);
	ASSERT(IDM_ABOUTBOX < 0xF000);

	CMenu* pSysMenu = GetSystemMenu(FALSE);
	if (pSysMenu != nullptr)
	{
		BOOL bNameValid;
		CString strAboutMenu;
		bNameValid = strAboutMenu.LoadString(IDS_ABOUTBOX);
		ASSERT(bNameValid);
		if (!strAboutMenu.IsEmpty())
		{
			pSysMenu->AppendMenu(MF_SEPARATOR);
			pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);
		}
	}

	// 设置此对话框的图标。  当应用程序主窗口不是对话框时，框架将自动
	//  执行此操作
	SetIcon(m_hIcon, TRUE);			// 设置大图标
	SetIcon(m_hIcon, FALSE);		// 设置小图标
    
    CoInitialize(NULL);

	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());


	return TRUE;  // 除非将焦点设置到控件，否则返回 TRUE
}
《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);
	};
}

在这里插入图片描述

1.5 运行效果

《1》依赖动态库整理

在 packages 目录下搜索缺少的依赖动态库。
在这里插入图片描述

搜索 "WebView2Loader.dll" ，拷贝到项目Debug目录下。
在这里插入图片描述

《2》运行程序

在这里插入图片描述

《3》百度导航

在这里插入图片描述

1.6 注意事项

在代码开始和结束的位置添加如下代码。

//初始化位置
CoInitialize(NULL);
//程序销毁
CoUninitialize();
码村长
关注
专栏目录
MFC中通过webbrowser控件操作网页。
09-06
这是一个通过webbrowser打开百度并控制搜索内容的MFC小项目。其它网页控制大同小异，可以做为参考。VS2015项目。
WebView2示例
12-30
WebView2示例根据官方教程练习的示例
WebView2-***组件深度剖析与应用
最新发布
weixin_35811662的博客
09-19 1652
本文还有配套的精品资源，点击获取 简介：WebView2是微软提供的一项重要组件，基于Chromium引擎，让开发者在桌面应用中嵌入Web内容。"WebView2-***.zip"包含特定版本的WebView2组件，用于提升Edge浏览器技术的集成与应用。它支持最新的Web标准并提供安全特性，如沙箱环境与SmartScreen筛选器，使桌面应用程序提供丰富的Web兼容性和安...
windows vs2022 MFC使用webview2嵌入网页
sz76211822的专栏
08-21 916
Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。WebView2 控件使用 Microsoft Edge 作为绘制引擎，以在本机应用中显示 web 内容。
WebView2的初步使用二 --- 基础操作
VitalityShow(网络通讯)
02-18 7394
上一篇文章 简单介绍了WebView2的集成与试用，这篇文章借着官方demo(WebView2APISample)来大体的记录一下集成情况。
Winform使用Webview2(Edge浏览器核心)实现精美教程目录
东明之羞的博客
01-21 1781
使用 Microsoft Edge WebView2 控件，可以使用基于Chromium的 Microsoft Edge 作为呈现引擎，在应用程序中托管 Web 内容。通过本地HTML作为界面实现精美软件。
MFC程序添加Web浏览器控件(IE控件)
TechTiger的博客
11-05 1万+
MFC程序添加Web浏览器控件(IE控件)       1. 新建一个基于对话框的MFC程序   这里使用VS2010建立一个MFC Application，种类选择基于对话框Dialog based。     2. 添加Web浏览器控件   2.1   在Toolbox对话框中任意地方右键选则 Choose Items… 。   2.2 弹出的Choose Toolbo
MFC中使用浏览器控件
weixin_30883777的博客
12-06 131
CWebBrowser2 * pBrowse = (CWebBrowser2 *) GetDlgItem(IDC_EXPLORER1);COleVariant sLoc("http://localhost");pBrowse->Navigate2(sLoc, NULL, NULL, NULL, NULL); 转载于:https://www.cnblogs.com/zzzili/a...
基于对话框MFC程序，使用浏览器控件显示网页样例
07-16
基于对话框的MFC程序，原生不支持WebBrowser控件的，这里使用Active插件，使用MicroSoft WebBrowser，实现浏览器控件显示网页。
【小沐学C++】C++ MFC中嵌入web网页控件（WebBrowser、WebView2、CEF3）
爱看书的小沐
04-01 7795
WebBrowser控件最常见的用途之一是向应用程序添加 Internet 浏览功能。使用 IWebBrowser2 接口，可以浏览到本地文件系统、网络或万维网上的任何位置。可以使用IWebBrowser2::Navigate 方法告知控件要浏览到哪个位置。第一个参数是包含位置名称的字符串。要浏览到本地文件系统或网络上的某个位置，请指定文件系统位置的完整路径或网络上该位置的 UNC 名称。若要浏览到万维网上的某个站点，请指定该站点的 URL。╮(￣▽￣)╭。
WebView之2
weixin_33943347的博客
08-06 274
首先需要添加权限： &lt;uses-permission android:name="android.permission.INTERNET"/&gt;　　 MainActivity: package com.wyl.webview; import android.app.Activity; import android.app.ProgressDialog; import ...
WebView2Browser:使用Microsoft Edge WebView2控件构建的Web浏览器
05-25
描述 extendedZipContent 语言 page_type 产品 urlFragment 使用Microsoft Edge WebView2控件构建的Web浏览器。 小路 目标 执照 执照 cpp javascript 样本 微软边缘 webview2浏览器 WebView2浏览器 使用控件构建的Web浏览器。 WebView2Browser是Windows桌面应用程序示例，演示了WebView2控件功能。 它是作为Win32 项目构建的，并在WebView2环境中同时使用C ++和JavaScript来增强其功能。 WebView2Browser显示了WebView2的一些最简单的用法-例如创建和导航WebView，还显示了一些更复杂的工作流，例如使用在单独的环境中通信WebView。 它旨在作为丰富的代码示例来介绍如何使用WebView2 API来构建自己的应
visual Studio2017使用MFC & WebBrowser控件的实例
02-21
平台：visual Studio 2017 语言 ：C++MFC 控件 ：WebBrowser 描述：使用WebBrowser控件，做成一个简易的浏览器，可以进行最基础的网页浏览操作。通过此案例，可以学到基础的WebBrowser的操作，之后就可以在自己所做的程序中嵌入一些网站，丰富软件内容
mfc 控件显示 被遮挡_利用MFC的Picture控件显示和处理图像
weixin_30002151的博客
12-30 1118
在《OpenCV教程-基础篇》的2.8节中，所创建的MFC图像显示是直接放在对话框面板的左上角的，感觉不大美观。在MFC快速应用opencv一书中则是介绍用SDI(单文档界面)来显示图像，《A step-by-step guide to the use of Microsoft Visual C++ and theIntel OpenCV library》使用VS2005来进行图像和视频的读取和处...
MFC图表控件high-speed-charting的使用
m0_60352504的博客
07-29 1602
high-speed-charting是MFC上的开源图表库
OpenCV 利用MFC的Picture控件显示和处理图像
mmqqyyqqyyq的博客
11-08 1525
OpenCV 利用MFC的Picture控件显示和处理图像
OpenCV学习笔记（9）利用MFC的Picture控件显示图像+播放视频和捕获摄像头画面
热门推荐
晨宇思远
10-29 7万+
原始版本下载页面（仅显示图像）： http://download.csdn.net/source/1779188 P.S.：后面又添加了播放视频和捕获摄像头画面的功能，其中播放视频的功能只有 Play 和 Stop，不能实现暂停，《A step-by-step guide to the use of Microsoft Visual C++ and the Intel OpenCV
如何在WinForms 应用中使用 WebView2
farway000的博客
06-02 2017
本教程可帮助你：设置开发工具。使用C# Windows 窗体 应用 (.NET Framework)Visual Studio 项目模板创建 WinForms 项目。安装 WinForms 项目的Microsoft.Web.WebView2SDK 包。在此过程中了解 WebView2 概念如。步骤 1 - （可选）克隆或下载 WebView2示例存储库执行以下任一操作：按照以下部分中的步骤...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值