[摘录] WebView2 与 JS 交互

https://docs.microsoft.com/zh-cn/microsoft-edge/webview2/gettingstarted/win32

步骤 5-脚本

托管应用还可以将 JavaScript 插入 Web 视图。 你可以通过任务 Web 视图执行任意 JavaScript 或添加初始化脚本。 已添加的初始化脚本将应用于所有未来的顶级文档和子框架导航，直到被删除，并在创建全局对象之后以及执行 HTML 文档包括的任何其他脚本之前运行。

复制以下代码片段并粘贴到其中 HelloWebView.cpp 。

C++

// Schedule an async task to add initialization script that freezes the Object object
webviewWindow->AddScriptToExecuteOnDocumentCreated(L"Object.freeze(Object);", nullptr);
// Schedule an async task to get the document URL
webviewWindow->ExecuteScript(L"window.document.URL;", Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
    [](HRESULT errorCode, LPCWSTR resultObjectAsJson) -> HRESULT {
        LPCWSTR URL = resultObjectAsJson;
        //doSomethingWithURL(URL);
        return S_OK;
    }).Get());

现在，Web 视图应该始终冻结 Object 对象并返回页面文档一次。

备注

脚本注入 Api \ （以及某些其他 WebView2 Api \）是异步的，如果必须按特定顺序运行代码，则应使用回调。

步骤 6-主机和 web 内容之间的通信

宿主和 web 内容也可能通过该方法互相通信 postMessage 。 在 web 视图内运行的 web 内容可能会通过该方法向主机发布 window.chrome.webview.postMessage ，并且消息由主机上任何注册的 ICoreWebView2WebMessageReceivedEventHandler 事件处理程序处理。 同样，主机可以通过 " ICoreWebView2::PostWebMessageAsString 或" ICoreWebView2::PostWebMessageAsJSON 方法处理 web 内容，这由从侦听器添加的处理程序捕获 window.chrome.webview.addEventListener 。 通信机制允许 web 内容通过将消息传递给请求主机调用本机 Api 来利用本机功能。

作为了解机制的示例，当你尝试在 Web 视图中打印文档 URL 时，将发生以下步骤。

1. 主机注册处理程序以返回收到的消息，返回到 web 内容
2. 主机将向注册处理程序的 web 内容插入脚本，以便从主机打印消息
3. 主机为将 URL 发布到主机的 web 内容插入脚本
4. 将触发主机的处理程序，并将消息 \ （URL \）返回到 web 内容
5. 将触发 web 内容的处理程序，并通过主机 \ （URL \）打印消息

复制以下代码片段并粘贴到其中 HelloWebView.cpp 。

C++

// Set an event handler for the host to return received message back to the web content
webviewWindow->add_WebMessageReceived(Callback<ICoreWebView2WebMessageReceivedEventHandler>(
    [](ICoreWebView2* webview, ICoreWebView2WebMessageReceivedEventArgs * args) -> HRESULT {
        PWSTR message;
        args->TryGetWebMessageAsString(&message);
        // processMessage(&message);
        webview->PostWebMessageAsString(message);
        CoTaskMemFree(message);
        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
webviewWindow->AddScriptToExecuteOnDocumentCreated(
    L"window.chrome.webview.addEventListener(\'message\', event => alert(event.data));" \
    L"window.chrome.webview.postMessage(window.document.URL);",
nullptr);

https://docs.microsoft.com/en-us/microsoft-edge/hosting/webview2/gettingstarted

Step 5 - Scripting

The hosting app can also inject JavaScript into WebView. You can task WebView to execute arbitrary JavaScript or add initialization scripts. Added initialization scripts apply to all future top level document and child frame navigation until removed, and run after the global object has been created and before any other script included by the HTML document is executed.

Copy the following code below // Step 5 - Scripting.

C++

// Schedule an async task to add initialization script that freezes the Object object
webviewWindow->AddScriptToExecuteOnDocumentCreated(L"Object.freeze(Object);", nullptr);
// Schedule an async task to get the document URL
webviewWindow->ExecuteScript(L"window.document.URL;", Callback<ICoreWebView2ExecuteScriptCompletedHandler>(
    [](HRESULT errorCode, LPCWSTR resultObjectAsJson) -> HRESULT {
        LPCWSTR URL = resultObjectAsJson;
        //doSomethingWithURL(URL);
        return S_OK;
    }).Get());

Now WebView will always freeze the Object object and return the page document once.

Note that these script injection APIs (and some other WebView2 APIs) are asynchronous, you should use callbacks if code is to be executed in a particular order.

Step 6 - Communication between host and web content

The host and the web content can also communicate with each other through postMessage. The web content running within a WebView can post to the host through window.chrome.webview.postMessage, and the message would be handled by any registered ICoreWebView2WebMessageReceivedEventHandler on the host. Likewise, the host can message the web content through ICoreWebView2::PostWebMessageAsString or ICoreWebView2::PostWebMessageAsJSON, which would be caught by handlers added from window.chrome.webview.addEventListener. The communication mechanism allows the web content to utilize native capabilities by passing messages to ask the host to call native APIs.

As an example to understand the mechanism, let's try printing out the document URL in WebView with a little detour,

1. the host registers a handler to return received message back to the web content
2. the host injects a script to the web content that registers a handler to print message from the host
3. the host injects a script to the web content that posts the URL to the host
4. the host's handler is triggered and returns the message (the URL) to the web content
5. the web content's handler is triggered and prints the host's message (the URL)

Copy the following code below // Step 6 - Communication between host and web content,

C++

// Set an event handler for the host to return received message back to the web content
webviewWindow->add_WebMessageReceived(Callback<ICoreWebView2WebMessageReceivedEventHandler>(
    [](ICoreWebView2* webview, ICoreWebView2WebMessageReceivedEventArgs * args) -> HRESULT {
        PWSTR message;
        args->TryGetWebMessageAsString(&message);
        // processMessage(&message);
        webview->PostWebMessageAsString(message);
        CoTaskMemFree(message);
        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
webviewWindow->AddScriptToExecuteOnDocumentCreated(
    L"window.chrome.webview.addEventListener(\'message\', event => alert(event.data));" \
    L"window.chrome.webview.postMessage(window.document.URL);",
nullptr);