windows vs2022 MFC使用webview2嵌入网页

server/2025/1/12 10:35:52/

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

一、通过菜单“项目”-“管理NuGet程序包”,下载相关包

二、安装 Microsoft.Web.WebView2

       在“浏览”分页的左上角的搜索栏中,键入 Microsoft.Web.WebView2,选择对应的版本,然后点击按钮安装

三、安装Microsoft.Windows.ImplementationLibrary

在“浏览”分页的左上角的搜索栏中,键入 Microsoft.Windows.ImplementationLibrary,选择对应的版本,然后点击按钮安装

四、添加界面消息映射

在对话框界面右击,选择“类向导”

 添加WM_CREATE和WM_SIZE消息:

五、添加代码

在MFCApplication1Dlg.h头文件中添加:

#include <iostream>
#include <wrl.h>
#include <wil/com.h>
#include "WebView2.h"#include <string>
#include <vector>
using namespace std;
using namespace Microsoft::WRL;// Pointer to WebViewController
static wil::com_ptr<ICoreWebView2Controller> webviewController = nullptr;// Pointer to WebView window
static wil::com_ptr<ICoreWebView2> webview = nullptr;

 在构造函数中添加:

CoInitializeEx(NULL, COINIT_APARTMENTTHREADED);

在析构函数中添加:

CoUninitialize();

在OnSize函数中添加:

if (webviewController != nullptr) {RECT bounds;GetClientRect(&bounds);webviewController->put_Bounds(bounds);
};

在OnCreate函数中添加:

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 WebViewCreateCoreWebView2EnvironmentWithOptions(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 hWndenv->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 settingswil::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 windowRECT bounds;::GetClientRect(hWnd, &bounds);webviewController->put_Bounds(bounds);// Schedule an async task to navigate to Bingwebview->Navigate(L"https://www.bing.com/");// <NavigationEvents>// Step 4 - Navigation events// register an ICoreWebView2NavigationStartingEventHandler to cancel any non-https navigationEventRegistrationToken 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 objectwebview->AddScriptToExecuteOnDocumentCreated(L"Object.freeze(Object);", nullptr);// Schedule an async task to get the document URLwebview->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 contentwebview->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 hostwebview->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());

六、截图

头文件:

构造函数和析构函数:

OnSize函数:

 

OnCreate函数:

运行截图:

 参考文档:https://blog.51cto.com/fish/6178983


http://www.ppmy.cn/server/105254.html

相关文章

前端常用npm库大全-vue,react,通用(持续更新)

构建工具 Name/GitHub/NPM描述演示地址Vite下一代的前端工具链Create React App通过运行一个命令来设置现代 Web 应用程序。Create React App中文文档通过运行一个命令来设置现代 Web 应用程序。Webpackjs强大的静态模块打包工具&#xff0c;主要用于现代JavaScript应用的构建…

内存函数memcpy和memmove

memcpy 内存拷贝 函数原型&#xff1a;void * memcpy(void * destination , void * source, size_t num); 函数mencpy从source的位置开始向后复制num个字符的数据到destinaton的内存位置这个函数遇到’\0’并不会停下来如果source和destination有任何的重叠&#xff0c;复制的…

Go 内存分配:结构体中的优化技巧

在使用Golang进行内存分配时&#xff0c;我们需要遵循一系列规则。在深入了解这些规则之前&#xff0c;我们需要先了解变量的对齐方式。 Golang的unsafe包中有一个函数Alignof&#xff0c;签名如下&#xff1a; func Alignof(x ArbitraryType) uintptr对于任何类型为v的变量x…

python爬虫源码:selenium+browsermobproxy实现浏览器请求抓取

前言 如上篇博客所述&#xff1a;为了抓取所有&#xff0c;通过浏览器F12可以看到的资源&#xff08;静态资源和接口调用&#xff09;&#xff0c;我使用了seleniumbrowsermobproxy的方案来处理。 这是两个模块的安装方案&#xff0c;没有看过的朋友可以去了解一下&#xff1a;…

Docker 启动单机版ES

官方安装教程&#xff1a;https://www.elastic.co/guide/en/elasticsearch/reference/8.14/docker.html#_linux 调整vm.max_map_count CentOS 7.9中&#xff0c;默认的vm.max_map_count值是65536。这个值表示一个进程可以拥有的虚拟内存区域&#xff08;VMA, Virtual Memory …

基于单片机的仿生水母水下机器人设计

摘 要 &#xff1a; 文章对水母喷水推进的运动方式进行建模 &#xff0c; 设计了仿生水母的机械结构 &#xff0c; 并重点设计了基于单片机的控制系统&#xff0c; 完成了基于单片机的仿生水母水下机器人的设计 &#xff0c; 具有一定的应用价值 。 关键词 &#xff1a; 单片机…

Git 远程操作

1. 理解分布式版本控制系统 我们所说的⼯作区&#xff0c;暂存区&#xff0c;版本库等&#xff0c;都是在本地&#xff01;也就是在笔记本或计算机上。⽽我们的 Git 其实是分布式版本控制系统.可以简单理解为&#xff0c;我们每个⼈的电脑上都是⼀个完整的版本库&#xff0c;这…

Swift中的数据守护者:Core Data全解析

标题&#xff1a;Swift中的数据守护者&#xff1a;Core Data全解析 在Swift语言的iOS开发中&#xff0c;数据持久化是一个核心议题&#xff0c;而Core Data则是Apple提供的一个强大而灵活的解决方案。它不仅可以处理本地数据存储&#xff0c;还可以与远程数据源同步。本文将深…