- \n
- Part 1: Introduction to Edge and WebView2<\/a><\/li>\n
- Part 2: Creating a WebView2 component<\/a><\/li>\n
- Part 3: Navigation and other events<\/li>\n
- Part 4: Performing navigation with custom data and headers<\/a><\/li>\n
- Part 5: Executing JavaScript code<\/a><\/li>\n
- Part 6: Printing a web page<\/a><\/li>\n<\/ul>\n<\/div>\n
Navigation overview<\/h2>\n
To navigate to a web URL you must use the method Navigate()<\/tt> from the ICoreWebView2<\/a> interface. The only argument this method takes is the URL of the web page. However, you must specify the scheme, such as http:\/\/<\/tt> or https:\/\/<\/tt> or file:\/\/<\/tt>. URLs of the form www.bing.com<\/em> or simply bing.com<\/em> do not work. For this reason, in the code shown in the previous article, you can see this helper method for navigating:<\/p>\n
CString CWebBrowser::NormalizeUrl(CString url)\n{\n if (url.Find(_T(\":\/\/\")) < 0)\n {\n if (url.GetLength() > 1 && url[1] == ':')\n url = _T(\"file:\/\/\") + url;\n else\n url = _T(\"http:\/\/\") + url;\n }\n\n return url;\n}\n\nvoid CWebBrowser::NavigateTo(CString url)\n{\n m_pImpl->m_webView->Navigate(NormalizeUrl(url));\n}<\/pre>\nWhat is happening here, we look if the URL contains :\/\/. If it does not, but it starts with something like C: then we prefix it with file:\/\/, otherwise with http:\/\/.<\/p>\n
During navigation, the web view control generates several events, as follows:
\n![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2020\/01\/dot_inline_dotgraph_1.png\")
\n(Source: docs.microsoft.com<\/a>)<\/p>\nNavigationStarting<\/tt> is the first event, generated when navigation begins. If HTTP redirection occurs, then multiple NavigationStarting<\/tt> events will be fired. When navigation completes, the event NavigationCompleted<\/tt> is fired. In between these, SourceChanged<\/tt>, ContentLoading<\/tt>, and HistoryChanged<\/tt> events may be generated.<\/p>\n
You can learn more about navigation events here<\/a>.<\/p>\n
If you want to display some HTML content that you have locally, or generated on the fly, and you do not actually need to go to the web, you can use the method NavigateToString()<\/tt> that will display the HTML content provided as a string.<\/p>\n
Handling navigation events<\/h2>\n
To handle web content events, you must register handlers. You can do this using the ICoreWebView2<\/tt> interface. For instance, to handle NavigationStarting<\/tt> and NavigationCompleted<\/tt>, call add_NavigationStarting<\/a> and add_NavigationCompleted<\/a>. If you no longer wish to handle these events, you can remove the handlers by calling remove_NavigationStarting<\/a> and remove_NavigationCompleted<\/a>.<\/p>\n
The same approach for registering and unregistering event handlers applies to all events. For an event X<\/tt> there is an add_X()<\/tt> and remove_X()<\/tt> pair of methods to add and remove handlers.<\/p>\n
You can only register events after the web view control has been created and you have a valid pointer to the ICoreWebView2<\/tt> interface. In the sample application, and the code shown in the previous article, the method OnCreateWebViewCompleted()<\/tt> contained a call to RegisterEventHandlers()<\/tt>. In this method, we add the handlers for the two navigation events.<\/p>\n
void CWebBrowser::RegisterEventHandlers()\n{\n \/\/ NavigationCompleted handler\n CHECK_FAILURE(m_pImpl->m_webView->add_NavigationCompleted(\n Callback<ICoreWebView2NavigationCompletedEventHandler>(\n [this](\n ICoreWebView2*, \n ICoreWebView2NavigationCompletedEventArgs* args) -> HRESULT\n {\n m_isNavigating = false;\n\n BOOL success;\n CHECK_FAILURE(args->get_IsSuccess(&success));\n\n if (!success)\n {\n COREWEBVIEW2_WEB_ERROR_STATUS webErrorStatus{};\n CHECK_FAILURE(args->get_WebErrorStatus(&webErrorStatus));\n if (webErrorStatus == COREWEBVIEW2_WEB_ERROR_STATUS_DISCONNECTED)\n {\n \/\/ Do something here if you want to handle a specific error case.\n \/\/ In most cases this isn't necessary, because the WebView will\n \/\/ display its own error page automatically.\n }\n }\n\n wil::unique_cotaskmem_string uri;\n m_pImpl->m_webView->get_Source(&uri);\n\n if (wcscmp(uri.get(), L\"about:blank\") == 0)\n {\n uri = wil::make_cotaskmem_string(L\"\");\n }\n\n auto callback = m_callbacks[CallbackType::NavigationCompleted];\n if (callback != nullptr)\n RunAsync(callback);\n\n return S_OK;\n })\n .Get(),\n &m_navigationCompletedToken));\n\n \/\/ NavigationStarting handler\n CHECK_FAILURE(m_pImpl->m_webView->add_NavigationStarting(\n Callback<ICoreWebView2NavigationStartingEventHandler>(\n [this](\n ICoreWebView2*,\n ICoreWebView2NavigationStartingEventArgs* args) -> HRESULT\n {\n wil::unique_cotaskmem_string uri;\n CHECK_FAILURE(args->get_Uri(&uri));\n\n m_isNavigating = true;\n \n return S_OK;\n }).Get(), &m_navigationStartingToken));\n}<\/pre>\nThe functions add_NavigationStarting()<\/tt> and add_NavigationCompleted<\/tt>, as well as the other event handler registration methods, take two arguments: the first is a pointer to a callback that is invoked when the event occurs, and the second is a pointer to a EventRegistrationToken<\/tt> object, which represent a reference to a delegate (the callback) that receives change notifications. This token is set by the function and must be passed to the method that removes the event handler. In other words, the token received from add_NavigationStarting()<\/tt> must be passed to remove_NavigationStarting()<\/tt> in order to be able to remove the event handler.<\/p>\n
What we do in the event handlers above is the following. At the start of the navigation, we only set a Boolean flag that indicates that the navigation is in progress. We need this for instance if we want to have a button that we can press to stop loading a page if that takes too long. At the end of the navigation, the flag is reset but we also invoke a callback, if any was set by the caller when starting the navigation. In the demo app, we use a callback for the navigation completion from the main frame in order to update the URL in the toolbar with the URL resulted after the navigation, which may not be the original one (because HTTP redirects can occur).<\/p>\n
In the previous article, we saw a method called CloseWebView()<\/tt> what closed the web view control. Here is the method updated with removing handlers for the navigation events.<\/p>\n
void CWebBrowser::CloseWebView()\n{\n if (m_pImpl->m_webView)\n {\n m_pImpl->m_webView->remove_NavigationCompleted(m_navigationCompletedToken);\n m_pImpl->m_webView->remove_NavigationStarting(m_navigationStartingToken);\n\n m_pImpl->m_webController->Close();\n\n m_pImpl->m_webController = nullptr;\n m_pImpl->m_webView = nullptr;\n m_pImpl->m_webSettings = nullptr;\n }\n\n m_pImpl->m_webViewEnvironment = nullptr;\n}<\/pre>\nHandling other events<\/h2>\n
Let us look at another example for handling events. For this purpose we will consider the DocumentTitleChanged<\/tt> event that is occurring when the DocumentTitle<\/tt> property of the web view changes. This may occur before or after the NavigationCompleted<\/tt> event. To add\/remove a handler for this event, you need a pointer to the ICoreWebView2<\/tt> interface.<\/p>\n
We can handle this event as follows, by adding a handler in the RegisterEventHandlers<\/tt> method we saw above.<\/p>\n
CHECK_FAILURE(m_pImpl->m_webView->add_DocumentTitleChanged(\n Callback<ICoreWebView2DocumentTitleChangedEventHandler>(\n [this](ICoreWebView2* sender, IUnknown* args) -> HRESULT {\n wil::unique_cotaskmem_string title;\n CHECK_FAILURE(sender->get_DocumentTitle(&title));\n\n m_strTitle = title.get();\n \n auto callback = m_callbacks[CallbackType::TitleChanged];\n if (callback != nullptr)\n RunAsync(callback);\n\n return S_OK;\n })\n .Get(), &m_documentTitleChangedToken));<\/pre>\nWhat we do here, is retrieving the title of the document and storing it in the class. Then, if a callback was set for this event we invoke it. We can modify the creation of the web view and install a callback for this event so that every time a page is loaded and the title changes we update the title of the main window of the application.<\/p>\n
void CMfcEdgeDemoView::OnInitialUpdate()\n{\n CView::OnInitialUpdate();\n\n this->ModifyStyleEx(WS_EX_CLIENTEDGE | WS_EX_WINDOWEDGE, 0, 0);\n this->ModifyStyle(WS_CAPTION | WS_SYSMENU | WS_MAXIMIZEBOX | WS_MINIMIZEBOX | WS_THICKFRAME | WS_BORDER, 0, 0);\n\n m_pWebBrowser = std::make_unique<CWebBrowser>();\n\n if (m_pWebBrowser != nullptr)\n {\n CRect rectClient;\n GetClientRect(rectClient);\n\n m_pWebBrowser->CreateAsync(\n WS_VISIBLE | WS_CHILD,\n rectClient,\n this,\n 1,\n [this]() {\n m_pWebBrowser->SetParentView(this);\n m_pWebBrowser->DisablePopups();\n m_pWebBrowser->Navigate(L\"https:\/\/bing.com\", nullptr);\n\n m_pWebBrowser->RegisterCallback(CWebBrowser::CallbackType::TitleChanged, [this]() {\n CString title = m_pWebBrowser->GetTitle();\n\n if (GetDocument() != nullptr)\n {\n GetDocument()->SetTitle(title);\n }\n\n AfxGetMainWnd()->SetWindowText(title);\n });\n });\n }\n}<\/pre>\nList of events<\/h2>\n
Currently, the following events can be handled.<\/p>\n
- Part 2: Creating a WebView2 component<\/a><\/li>\n