MFC使用 Microsoft Edge Web View2 欣赏器控件显示网页

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:

1. <?xml version="1.0" encoding="utf-8"?>
2. <packages>
3.   <package id="Microsoft.Web.WebView2" version="1.0.1901.177" targetFramework="native" />
4.   <package id="Microsoft.Windows.ImplementationLibrary" version="1.0.230629.1" targetFramework="native" />
5. </packages>

复制代码

1.3 添加依赖项

工程–>右键–>生成依赖项(B)。

1.4 添加Web控件

《1》添加变量和头文件

1. #include <iostream>
2. #include <wrl.h>
3. #include <wil/com.h>
4. #include "WebView2.h"
6. using namespace Microsoft::WRL;
8. // Pointer to WebViewController
9. static wil::com_ptr<ICoreWebView2Controller> webviewController;
11. // Pointer to WebView window
12. static wil::com_ptr<ICoreWebView2> webview;

复制代码

《2》在OnCreate变乱函数中添加代码

单文档或者多文档项目添加如下代码。

1. int CMFCApplication9View::OnCreate(LPCREATESTRUCT lpCreateStruct)
2. {
3.         if (CView::OnCreate(lpCreateStruct) == -1)
4.                 return -1;
6.         HWND hWnd = this->m_hWnd;
8.         // TODO:  在此添加您专用的创建代码
9.         // <-- WebView2 sample code starts here -->
10.         // Step 3 - Create a single WebView within the parent window
11.         // Locate the browser and set up the environment for WebView
12.         CreateCoreWebView2EnvironmentWithOptions(nullptr, nullptr, nullptr,
13.                 Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
14.                         [hWnd](HRESULT result, ICoreWebView2Environment* env) -> HRESULT {
16.                 // Create a CoreWebView2Controller and get the associated CoreWebView2 whose parent is the main window hWnd
17.                 env->CreateCoreWebView2Controller(hWnd, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
18.                         [hWnd](HRESULT result, ICoreWebView2Controller* controller) -> HRESULT {
19.                         if (controller != nullptr) {
20.                                 webviewController = controller;
21.                                 webviewController->get_CoreWebView2(&webview);
22.                         }
24.                         // Add a few settings for the webview
25.                         // The demo step is redundant since the values are the default settings
26.                         wil::com_ptr<ICoreWebView2Settings> settings;
27.                         webview->get_Settings(&settings);
28.                         settings->put_IsScriptEnabled(TRUE);
29.                         settings->put_AreDefaultScriptDialogsEnabled(TRUE);
30.                         settings->put_IsWebMessageEnabled(TRUE);
32.                         // Resize WebView to fit the bounds of the parent window
33.                         RECT bounds;
34.                         ::GetClientRect(hWnd, &bounds);
35.                         webviewController->put_Bounds(bounds);
37.                         // Schedule an async task to navigate to Bing
38.                         webview->Navigate(L"https://www.bing.com/");
40.                         // <NavigationEvents>
41.                         // Step 4 - Navigation events
42.                         // register an ICoreWebView2NavigationStartingEventHandler to cancel any non-https navigation
43.                         EventRegistrationToken token;
44.                         webview->add_NavigationStarting(Callback<ICoreWebView2NavigationStartingEventHandler>(
45.                                 [](ICoreWebView2* webview, ICoreWebView2NavigationStartingEventArgs* args) -> HRESULT {
46.                                 wil::unique_cotaskmem_string uri;
47.                                 args->get_Uri(&uri);
48.                                 std::wstring source(uri.get());
49.                                 if (source.substr(0, 5) != L"https") {
50.                                         args->put_Cancel(true);
51.                                 }
52.                                 return S_OK;
53.                         }).Get(), &token);
54.                         // </NavigationEvents>
56.                         // <Scripting>
57.                         // Step 5 - Scripting
58.                         // Schedule an async task to add initialization script that freezes the Object object
59.                         webview->AddScriptToExecuteOnDocumentCreated(L"Object.freeze(Object);", nullptr);
60.                         // Schedule an async task to get the document URL
61.                         webview->ExecuteScript(L"window.document.URL;", Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
62.                                 [](HRESULT errorCode, LPCWSTR resultObjectAsJson) -> HRESULT {
63.                                 LPCWSTR URL = resultObjectAsJson;
64.                                 //doSomethingWithURL(URL);
65.                                 return S_OK;
66.                         }).Get());
67.                         // </Scripting>
69.                         // <CommunicationHostWeb>
70.                         // Step 6 - Communication between host and web content
71.                         // Set an event handler for the host to return received message back to the web content
72.                         webview->add_WebMessageReceived(Callback<ICoreWebView2WebMessageReceivedEventHandler>(
73.                                 [](ICoreWebView2* webview, ICoreWebView2WebMessageReceivedEventArgs* args) -> HRESULT {
74.                                 wil::unique_cotaskmem_string message;
75.                                 args->TryGetWebMessageAsString(&message);
76.                                 // processMessage(&message);
77.                                 webview->PostWebMessageAsString(message.get());
78.                                 return S_OK;
79.                         }).Get(), &token);
81.                         // Schedule an async task to add initialization script that
82.                         // 1) Add an listener to print message from the host
83.                         // 2) Post document URL to the host
84.                         webview->AddScriptToExecuteOnDocumentCreated(
85.                                 L"window.chrome.webview.addEventListener(\'message\', event => alert(event.data));" \
86.                                 L"window.chrome.webview.postMessage(window.document.URL);",
87.                                 nullptr);
88.                         // </CommunicationHostWeb>
90.                         return S_OK;
91.                 }).Get());
92.                 return S_OK;
93.         }).Get());
95.         // <-- WebView2 sample code ends here -->
96.         return 0;
97. }

复制代码

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

1. BOOL CMFCWebView2Dlg::OnInitDialog()
2. {
3.         CDialogEx::OnInitDialog();
5.         // 将“关于...”菜单项添加到系统菜单中。
7.         // IDM_ABOUTBOX 必须在系统命令范围内。
8.         ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX);
9.         ASSERT(IDM_ABOUTBOX < 0xF000);
11.         CMenu* pSysMenu = GetSystemMenu(FALSE);
12.         if (pSysMenu != nullptr)
13.         {
14.                 BOOL bNameValid;
15.                 CString strAboutMenu;
16.                 bNameValid = strAboutMenu.LoadString(IDS_ABOUTBOX);
17.                 ASSERT(bNameValid);
18.                 if (!strAboutMenu.IsEmpty())
19.                 {
20.                         pSysMenu->AppendMenu(MF_SEPARATOR);
21.                         pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);
22.                 }
23.         }
25.         // 设置此对话框的图标。  当应用程序主窗口不是对话框时，框架将自动
26.         //  执行此操作
27.         SetIcon(m_hIcon, TRUE);                        // 设置大图标
28.         SetIcon(m_hIcon, FALSE);                // 设置小图标
29.    
30.     CoInitialize(NULL);
32.         HWND hWnd = this->m_hWnd;
34.         // TODO:  在此添加您专用的创建代码
35.         // <-- WebView2 sample code starts here -->
36.         // Step 3 - Create a single WebView within the parent window
37.         // Locate the browser and set up the environment for WebView
38.         CreateCoreWebView2EnvironmentWithOptions(nullptr, nullptr, nullptr,
39.                 Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
40.                         [hWnd](HRESULT result, ICoreWebView2Environment* env) -> HRESULT
41.                         {
43.                                 // Create a CoreWebView2Controller and get the associated CoreWebView2 whose parent is the main window hWnd
44.                                 env->CreateCoreWebView2Controller(hWnd, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
45.                                         [hWnd](HRESULT result, ICoreWebView2Controller* controller) -> HRESULT {
46.                                                 if (controller != nullptr) {
47.                                                         webviewController = controller;
48.                                                         webviewController->get_CoreWebView2(&webview);
49.                                                 }
51.                                                 // Add a few settings for the webview
52.                                                 // The demo step is redundant since the values are the default settings
53.                                                 wil::com_ptr<ICoreWebView2Settings> settings;
54.                                                 webview->get_Settings(&settings);
55.                                                 settings->put_IsScriptEnabled(TRUE);
56.                                                 settings->put_AreDefaultScriptDialogsEnabled(TRUE);
57.                                                 settings->put_IsWebMessageEnabled(TRUE);
59.                                                 // Resize WebView to fit the bounds of the parent window
60.                                                 RECT bounds;
61.                                                 ::GetClientRect(hWnd, &bounds);
62.                                                 webviewController->put_Bounds(bounds);
64.                                                 // Schedule an async task to navigate to Bing
65.                                                 webview->Navigate(L"https://www.bing.com/");
67.                                                 // <NavigationEvents>
68.                                                 // Step 4 - Navigation events
69.                                                 // register an ICoreWebView2NavigationStartingEventHandler to cancel any non-https navigation
70.                                                 EventRegistrationToken token;
71.                                                 webview->add_NavigationStarting(Callback<ICoreWebView2NavigationStartingEventHandler>(
72.                                                         [](ICoreWebView2* webview, ICoreWebView2NavigationStartingEventArgs* args) -> HRESULT {
73.                                                                 wil::unique_cotaskmem_string uri;
74.                                                                 args->get_Uri(&uri);
75.                                                                 std::wstring source(uri.get());
76.                                                                 if (source.substr(0, 5) != L"https") {
77.                                                                         args->put_Cancel(true);
78.                                                                 }
79.                                                                 return S_OK;
80.                                                         }).Get(), &token);
81.                                                 // </NavigationEvents>
83.                                                 // <Scripting>
84.                                                 // Step 5 - Scripting
85.                                                 // Schedule an async task to add initialization script that freezes the Object object
86.                                                 webview->AddScriptToExecuteOnDocumentCreated(L"Object.freeze(Object);", nullptr);
87.                                                 // Schedule an async task to get the document URL
88.                                                 webview->ExecuteScript(L"window.document.URL;", Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
89.                                                         [](HRESULT errorCode, LPCWSTR resultObjectAsJson) -> HRESULT {
90.                                                                 LPCWSTR URL = resultObjectAsJson;
91.                                                                 //doSomethingWithURL(URL);
92.                                                                 return S_OK;
93.                                                         }).Get());
94.                                                 // </Scripting>
96.                                                 // <CommunicationHostWeb>
97.                                                 // Step 6 - Communication between host and web content
98.                                                 // Set an event handler for the host to return received message back to the web content
99.                                                 webview->add_WebMessageReceived(Callback<ICoreWebView2WebMessageReceivedEventHandler>(
100.                                                         [](ICoreWebView2* webview, ICoreWebView2WebMessageReceivedEventArgs* args) -> HRESULT {
101.                                                                 wil::unique_cotaskmem_string message;
102.                                                                 args->TryGetWebMessageAsString(&message);
103.                                                                 // processMessage(&message);
104.                                                                 webview->PostWebMessageAsString(message.get());
105.                                                                 return S_OK;
106.                                                         }).Get(), &token);
108.                                                 // Schedule an async task to add initialization script that
109.                                                 // 1) Add an listener to print message from the host
110.                                                 // 2) Post document URL to the host
111.                                                 webview->AddScriptToExecuteOnDocumentCreated(
112.                                                         L"window.chrome.webview.addEventListener(\'message\', event => alert(event.data));" \
113.                                                         L"window.chrome.webview.postMessage(window.document.URL);",
114.                                                         nullptr);
115.                                                 // </CommunicationHostWeb>
117.                                                 return S_OK;
118.                                         }).Get());
119.                                 return S_OK;
120.                         }).Get());
123.         return TRUE;  // 除非将焦点设置到控件，否则返回 TRUE
124. }

复制代码

《3》在OnSize变乱函数中添加代码

1. void CMFCApplication9View::OnSize(UINT nType, int cx, int cy)
2. {
3.         CView::OnSize(nType, cx, cy);
5.         // TODO: 在此处添加消息处理程序代码
6.         if (webviewController != nullptr) {
7.                 RECT bounds;
8.                 GetClientRect(&bounds);
9.                 webviewController->put_Bounds(bounds);
10.         };
11. }

复制代码

1.5 运行效果

《1》依赖动态库整理

在 packages 目录下搜索缺少的依赖动态库。

搜索 "WebView2Loader.dll" ，拷贝到项目Debug目录下。

《2》运行程序

《3》百度导航

1.6 注意事项

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

1. //初始化位置
2. CoInitialize(NULL);
3. //程序销毁
4. CoUninitialize();

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。