webview2导入到mfc参考:
windows vs2022 MFC使用webview2嵌入网页-CSDN博客
webview2与js交互参考:WebView2教程(基于C++)【四】JS与C++互访(上)_window.chrome.webview.postmessage-CSDN博客
一、JS端发送和接收
JS中,通过postMessage方法向C++发送消息,代码如下
window.chrome.webview.postMessage(window.document.URL)
JS监听从C++发来的数据,代码如下:
window.chrome.webview.addEventListener("message", (e) => {//console.log(e);alert(e.data);
})
完整html:
<!DOCTYPE html>
<html><head></head><body><button onclick="test()">测试</button><script>function test(){window.chrome.webview.postMessage('123') }window.chrome.webview.addEventListener("message", (e) => {//console.log(e);alert(e.data);})</script></body>
</html>
二、C++端webview2 接收消息和发送消息
C++中要想接收消息,必须注册一个WebMessageReceived事件,
在WebView2控件成功添加到窗口上时,我们就可以注册事件了,代码如下:
webview->add_WebMessageReceived(Callback<ICoreWebView2WebMessageReceivedEventHandler>([](ICoreWebView2* webview, ICoreWebView2WebMessageReceivedEventArgs* args) -> HRESULT {wil::unique_cotaskmem_string message;args->TryGetWebMessageAsString(&message);//从html接收数据// processMessage(&message);webview->PostWebMessageAsString(message.get());//发送数据到htmlreturn S_OK;}).Get(), &token);
三、从本地加载一个html
本地文件路径:file:///C:/Users/76211/Desktop/a.html
完整代码:
void CMFCApplication1Dlg::LoadUrl(const wstring& strUrl)
{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, strUrl](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, strUrl](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(strUrl.c_str());// <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);//从html接收数据// processMessage(&message);webview->PostWebMessageAsString(message.get());//发送数据到htmlreturn 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());
}
四、运行截图
打开界面,本地网页在mfc界面中:
从html接收到的数据:
发送到html的数据:
五、微软官方参考
WebView2 功能和 API 概述 - Microsoft Edge Developer documentation | Microsoft Learn
说明:
webview->AddScriptToExecuteOnDocumentCreated(L"window.chrome.webview.addEventListener(\'message\', event => alert(event.data));" \L"window.chrome.webview.postMessage(window.document.URL);",nullptr);
这段代码在切换网页时会弹框,可以不需要