通过WebView2向/从您的网站发送和接收消息

• 下载源代码 - 143.4 KB

我在本例中使用的HTML文件位于Release/Debug文件夹中。因此，您无需担心路径或其位置。

引言

现在，随着新的Edge WebView2的出现，一切都在发生变化，它是一个快速、现代、基于Chromium的浏览器。现在，它将在未来的项目中被越来越多地使用。

在今天的文章中，我将向您展示如何直接调用JavaScript方法，以及JavaScript如何将WebMessage发送到C++应用程序。这非常简单。

背景

技术发展非常迅速，浏览器也是如此。与Chrome和Mozilla等其他现代浏览器相比，Internet Explorer已经落后。为了弥补这一点，微软现在已经转向基于Chromium的Edge。

Using the Code

如果您想知道如何在基于C++ MFC的应用程序中使用WebView2，那么您应该首先查看我之前在CodeProject上的文章。因此，我假设您知道如何使WebView2应用程序与MFC C++应用程序一起工作。

调用JavaScript方法或脚本

首先，我们将重点关注如何直接从C++应用程序调用JavaScript方法。您可以在下面看到我的网页中的一个JavaScript方法。

function MessageReceived(Message)
{
   alert('HTML Page Popup :'+Message);
}

在这里，我们在C++应用程序中有一个方法。在这个方法中，使用m_webView（即WebView2对象）对象，我们可以直接执行JavaScript代码。

在这里，您可以看到我正在调用一个名为“MessageReceived”的函数，这是上面的JavaScript消息。

void CEdgeBrowserAppDlg::SendMessageClicked()
{
    m_webView->ExecuteScript(L"MessageReceived
    ('Ayush sent a message from C++ application')", 
    Callback<ICoreWebView2ExecuteScriptCompletedHandler>
    (this, &CEdgeBrowserAppDlg::ExecuteScriptResponse).Get());
}

或者您可以使用以下代码显示一个警报框

void CEdgeBrowserAppDlg::SendMessageClicked() 
{  
   m_webView->ExecuteScript(L"alert('Ayush sent a message from C++ application')", 
   Callback<ICoreWebView2ExecuteScriptCompletedHandler>
   (this, &CEdgeBrowserAppDlg::ExecuteScriptResponse).Get()); 
} 

或者您可以使用以下代码读取整个文档

void CEdgeBrowserAppDlg::SendMessageClicked()
{  
  m_webView->ExecuteScript(L"document.documentElement.outerHTML", 
  Callback<ICoreWebView2ExecuteScriptCompletedHandler>
  (this, &CEdgeBrowserAppDlg::ExecuteScriptResponse).Get());
} 

如果您想从JavaScript获得任何响应，例如，在第三个示例中，document.documentElement.outerHTML，我们想读取页面的整个HTML代码。然后，我们可以在ExecuteScriptResponse()方法中访问此响应。

您可以从result参数中获取响应。

HRESULT CEdgeBrowserAppDlg::ExecuteScriptResponse(HRESULT errorCode, LPCWSTR result)
{
    AfxMessageBox(L"C++ Application Popup : Message Sent Successfully");
    return S_OK;
}

调用C++方法

为了调用C++方法，我们只需要在JavaScript中编写一行代码。您可以在下面看到一个名为SendMessage的JavaScript方法。并且可以看到我们如何将消息发布到web view。

function SendMessage() 
{
     var val = document.getElementById("txt").value;
     window.chrome.webview.postMessage(val);     
}

在C++中，我们必须有一个传入的消息处理程序方法，通过该方法我们可以检索JavaScript发送的消息。

所以，首先要做的是在OnCreateCoreWebView2ControllerCompleted方法中使用这两行代码调用处理程序，就在我们导航到页面之前。

EventRegistrationToken token;
m_webView->add_WebMessageReceived(Callback<ICoreWebView2WebMessageReceivedEventHandler>
(this, &CEdgeBrowserAppDlg::WebMessageReceived).Get(), &token);

第二，当新消息到来时，将被调用的方法。

HRESULT CEdgeBrowserAppDlg::WebMessageReceived
(ICoreWebView2* sender, ICoreWebView2WebMessageReceivedEventArgs* args)
{
    LPWSTR pwStr;
    args->TryGetWebMessageAsString(&pwStr);
    CString receivedMessage = pwStr;
    if (!receivedMessage.IsEmpty())
    {
        AfxMessageBox("This message came from Javascript : " + receivedMessage);
    }
    return S_OK;
}

就这样，我们现在可以开始了并测试应用程序。首先，您可以看到这个基本应用程序的外观。

在这里，我们可以看到WebView2中一个非常基本的HTML页面，其中我们有一个文本框和一个按钮，用于向C++应用程序发送消息。此外，还有一个菜单选项向HTML页面发送消息，用于向我们的HTML/网站发送消息。

现在，我们在文本框中键入一条消息，然后单击“发送消息”

我们可以看到消息被WebView2（即C++应用程序）接收。

现在，我们将进行相反的操作，并向HTML页面发送消息。为了做到这一点，有一个菜单选项向HTML页面发送消息，只需单击它即可。

单击后，Web页面将收到一条消息。

如果您想要执行的脚本的响应，您可以在以下方法中获取它

HRESULT CEdgeBrowserAppDlg::ExecuteScriptResponse(HRESULT errorCode, LPCWSTR result)
{
    AfxMessageBox(L"C++ Application Popup : Message Sent Successfully");
    return S_OK;
}

您可以根据需要处理响应。

在这里，我只是显示一个消息框，表明消息已成功发送。

难道不是很酷而且很容易吗？请在评论中告诉我。

并且如果这对您有所帮助，请随意为这篇文章评分。

必备组件

WebView2支持以下编程环境

• Win32 C/C++ (GA)
• .NET Framework 4.6.2 或更高版本
• .NET Core 3.1 或更高版本
• .NET 5
• WinUI 3.0 (预览版)

确保您已在受支持的操作系统（目前为 Windows 10、Windows 8.1 和 Windows 7）上安装了 Microsoft Edge (Chromium) 和 WebView2 SDK。

您必须安装了 Visual Studio 2015 或更高版本 并支持 C++。

非常感谢

关注点

我的上一篇文章 WebView2 Edge Browser in MFC C++ 帮助了很多人，并且鼓励我与他人分享我的知识，因为如果不与他人分享或分发，那么知识就是无用的。

历史

• 2021 年 3 月 1 日：初始版本