How to use WebView2 to grab href from DOM elements

Question

How to use WebView2 to grab href from DOM elements

john zyd 421

I want to know if I can use WebView2 to browse some web page, and find the links from DOM elements.
For example, I can use Edge browser to visit this web page:
https://github.com/search?q=webview2
Then from the search results returned, I can see a lot of web links.
At least some of them can be retrieved by JavaScript from Developer Tools, like this:
var links = document.getElementsByClassName('v-align-middle');

I want to know if I can run such simple JavaScript from the web page:
https://github.com/search?q=webview2
to get all the web URLs (href) from the DOM elements.
I searched around, I can’t find any helpful code example. All other codes didn’t solve my problem.
Please advise,

1 answer

Your answer

Answer 1

Castorix31 90,686

You can use CoreWebView2.ExecuteScriptAsync

For example, to get the body :

string sHtml = await webView21.CoreWebView2.ExecuteScriptAsync("document.documentElement.outerHTML");  
string sHtmlDecoded = System.Text.RegularExpressions.Regex.Unescape(sHtml);

then you can parse sHtmlDecoded

john zyd 421 Reputation points

2021-04-05T09:02:01.59+00:00

Hello:
I know I can use your code to get the document body, but my requirement is a little different:
I want to get all DOM elements from JavaScript statement:
var links = document.getElementsByClassName('v-align-middle');
And trying to get the href attribute from the DOM elements, then later, I can use WebView2 to navigate to each of them.
I can't figure out how to use the document body to get the information I want.
Please advise!
Thanks,
Castorix31 90,686 Reputation points

2021-04-05T09:35:33.517+00:00

Once you have all the body, you can parse it
There are several methods like RegEx, but you can use Html Agility Pack
as explained at How to Parse HTML using C#

Miles Buckton 1

Thank you @Castorix31 ! :D This pointed me in the right direction. You decoding method worked perfectly! :) The load event was the remaining key to the puzzle. See below:

private async void WebBrowserForm_Load(object sender, EventArgs e)  
{  
	await webView2.EnsureCoreWebView2Async();  
}  
  
private async void webView2_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)  
{  
	string htmlEncoded = await webView2.CoreWebView2.ExecuteScriptAsync("document.documentElement.outerHTML");  
	string htmlDecoded = Regex.Unescape(htmlEncoded);  
}

Share via

How to use WebView2 to grab href from DOM elements

1 answer

Your answer