Need help to run JavaScript in WebVeiw2

Question

Need help to run JavaScript in WebVeiw2

john zyd 421

Hello:

Quite some time ago, I used WebView in XML project, I can use WebView to inject JavaScript, run it and get string result in C#.

But now, with the new WebVew2 coming, I want to find a good example to inject a custom JavaScript and return the string result, but I can’t find a good example.

For example:

I created one Windows Forms .NET Framework App project (target .net framework 4.8), then downloaded Edge Canary for Windows 10, install WebView2 nuget package:

Install-Package Microsoft.Web.WebView2 -Version 1.0.664.37; then from Toolbox. Drag and drop the WebView2 control, and changed its source to https://www.bing.com/

Now, in Edge Canary, when I browsed to https://www.bing.com/; I can open developer tools, and under “console” tab, run a small JavaScript:

var divs = document.getElementsByTagName('div');

var div_length = divs.length;

console.log(div_length);

I can run this, and saw the output: 189

My question is: how I can run such small JavaScript in one WebView2 program to see the result. I wrote some code to do the similar thing on many different web sites, I can only see the result is null.

Please someone show me some code on how to do this.

By the way, my IDE is: Visual Studio 2019 Version 16.8.3 on Windows 10 (Version 20H2 OS build 19042.685)

1 answer

Your answer

Answer 1

Tianyu Sun-MSFT 34,436 Microsoft External Staff

Hi @john zyd ,

Thank you for taking time to post this issue in Microsoft Q&A forum.

Perhaps, you can try to use OpenDevToolsWindow() and ExecuteScriptAsync() methods to make it work(CoreWebView2 Class - Methods).

The code snippets may be like this:

The result:

Update1:

This issue should be caused by programming of JS, and please try these codes

and note that I set two controls, one WebView2 control and one TextBox control, and named them webView21 and textBox1. The textBox1 is used to view the result(value).

Best Regards,
Tianyu

If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

john zyd 421 Reputation points

2020-12-31T11:56:58.67+00:00

Hello:
Thank you very much for your works. However, I can't make it working, as I can't see your whole program. From my testing, the webView21_NavigationStarting didn't run when the program starts.
By the way, the worst thing is: I want to run the value, in this example, the value "189" return to a C# variable, so I can read the return results. I can accept the string value or Json format string value, but your code looks just see the result by eyes, which is rather useless.
I remember more than one year ago, WebView control can do the job, I don't know why after such a long time, WebView2 can't return the value as a variable to C# caller.
Please show me you total code, as I don't know why webView21_NavigationStarting could not run only from your code snippet.
However, most importantly, I want to know how to return the console.log result as string to a C# variable.
Thanks and happy new year!
Tianyu Sun-MSFT 34,436 Reputation points Microsoft External Staff

2021-01-05T10:03:19.75+00:00

Hello @john zyd , thank you for your feedback. I think it is not available if you want to get the (returned)console.log result as string to a C# variable. It seems the Console is isolated from other codes, and C# from outside can’t get the value inside it. Besides, for the total codes, the codes I shared above are my total codes, I just added this two events and didn’t modify any other codes and settings. Also, did you change the name of this NavigationStarting event to match your WebView control’s name?
john zyd 421 Reputation points

2021-01-05T11:48:54.723+00:00

Hello:
Thanks for your feedback. But it is available long time ago with old WebView. I don't necessarily need to run the JavaScript from Console, as long as I can inject the simple custom JavaScript and get the return results in string, it will be enough.
Maybe you can ask WebView2 team to see if they have other ways to inject JavaScript and return the string results. They did this a long time ago.
Thanks,
Tianyu Sun-MSFT 34,436 Reputation points Microsoft External Staff

2021-01-06T09:04:37.847+00:00

Hello @john zyd , I did more tests and I suggest you try these codes:

Note that I set two controls, one WebView2 control and one TextBox control, and named them webView21 and textBox1. The textBox1 is used to view the result(value).

Also, I have updated my answer above.

I hope this time it could work :)
john zyd 421 Reputation points

2021-01-07T16:30:08.71+00:00

Hello:
This time, your code works. However, the tricky part is that, usually you can't directly write the webview_NavigationCompleted function, and add code there, as the code will not be called by program.
Instead, you have to click on the properties window of the WebView2, and click on "Events" button, then look for "NavigationCompleted" event, then double-click "NavigationCompleted", then adding the code there, then it works!
But I have another question? Can I add one button in the Form1, and add the code in button_click to get the same result. I can wait long enough for the web page to load. For example, some web pages use Captacha, I want to wait until I finish selecting the picture, then run my JavaScript.
What is your suggestion?
john zyd 421 Reputation points

2021-01-07T19:29:45.333+00:00

Hello:
May I ask one further question on top of this one.
I need to use run the following JavaScript on bing.com, it is a little more complicated:
function listen() { console.log(this.responseText); } var oReq = new XMLHttpRequest(); oReq.addEventListener('load', listen);
oReq.open('GET', 'https://www.bing.com/'); oReq.send();
I tried this on MS-Edge, it works, I can see all the HTML contents. However, I put my code in my project at NavigationCompleted part, but I got the result of "null".
I tried both "console.log" and "return", but I only get "null".
How I can launch javascript XHR request and return the downloaded HTML contents?
Thanks,
Tianyu Sun-MSFT 34,436 Reputation points Microsoft External Staff

2021-01-08T09:48:09.713+00:00

Hello @john zyd , thank you for your feedback.

Of course, you can write these codes in a button_click event, and yes, you need to click on Events button > search and find NavigationCompleted event or other events, but for button_click event it will be faster to double-click the button control to create a button_click event.
Tianyu Sun-MSFT 34,436 Reputation points Microsoft External Staff

2021-01-08T09:48:37.047+00:00

For this issue:

However, I put my code in my project at NavigationCompleted part, but I got the result of “null”.

I think you might have noticed that every time, when you directly typing these codes in the Console and press Enter, yes, the data will be
successfully logged and displayed in the Console, but there is also a line which prompts undefined. And considering of the result null, the returned data is indeed null, because there isn’t any data returned, and C# can’t caught them but the null.

If you change console.log(this.responseText); to return XXXX, the XXX will be returned, but this function: listen() is called by addEventListener() method, but I think you knew what value oReq.addEventListener() will return.

So, you may need to change the JS to get and return the not null(undefined) value you want.
Tianyu Sun-MSFT 34,436 Reputation points Microsoft External Staff

2021-01-08T09:53:29.67+00:00

For example:
john zyd 421 Reputation points

2021-01-08T11:06:40.1+00:00

Hello:
Thank you very much for your work. However, I did some testing, but it did work as in your screen.
What I did was: I open MS-Edge, visit www.bing.com, then open Console tab in developer tools, try to use function sleep(ms), but I got error: Unexpected identifier. I looked at your code, I can't see anything wrong. But it didn't work in my Edge browser.
Then I skip the sleep function, try to use the other code to get the result, I got "null" result.
You can see the screen shot.
Let me know if I made any mistake.
Thanks,
john zyd 421 Reputation points

2021-01-10T20:57:42.43+00:00

Hello:
I figured out how to return JavaScript value using XHR request in WebView2.
However, I found that XHR requests seem out of date, now, many people are using Fetch API to get data from internet.
So, I have tried the following JavaScript using Fetch API:
function fetch_url()
{ fetch('https://www.bing.com/')
.then(function(response) { return response.text(); })
.then(function(data) { console.log(data); })
};
fetch_url();
The above JavaScript works in MS Edge browser.
However, if I want to return data to caller using the following code:
function fetch_url()
{ fetch('https://www.bing.com/')
.then(function(response) { return response.text(); })
.then(function(data) { return data; })
};
fetch_url();
The code did NOT work, neither in MS-Edge nor in WebView2.
Any suggestion? I actually want to return Json format data if possible, but www.bing.com seems unable to return Json format data.
Tianyu Sun-MSFT 34,436 Reputation points Microsoft External Staff

2021-01-11T09:16:42.607+00:00

Hi @john zyd , the function fetch_url() still didn’t have a returned value, if you check again, even with the first JS snippet, you will see this prompt: undefined.

So this issue is still related to JS codes. Please try to let the function fetch_url() return the value which you want directly, instead of returning value from other APIs called inside the function fetch_url().
john zyd 421 Reputation points

2021-01-11T17:26:33.047+00:00

Hello:
I tried many times to modify my code, one of the code was like this:
function fetch_url()
{
let data = fetch('https://www.bing.com/')
.then(function(response) { return response.text(); })
return data;
};
fetch_url();
From MS-Edge, I can see the Promise {<pending>}.
If I assigned it to a variable, like:
var x0 = fetch_url();
I can see the promise and the value of HTML content. However, when I used the above code in WebView2, I always get empty {} value returned.
I searched quite a lot for this topic, but nothing is about using Fetch API and return the value to WebView2, ExecuteScriptAsync. I think there could be some issue using ExecuteScriptAsync to wait for async functions. For example, if I put promise sleep for 20 seconds in my code, but WebView2.ExecuteScriptAsync return immediately '{}' empty value.
Please if you know how to return the async Fetch value, show me your code.
Thaks,
Tianyu Sun-MSFT 34,436 Reputation points Microsoft External Staff

2021-01-13T09:36:26.64+00:00

Hello @john zyd , could you share the related JS code(maybe some screenshots) about using var x0 = fetch_url(); to see the promise and the value of HTML content with me? As I tested but failed to see the HTML content.
john zyd 421 Reputation points

2021-01-13T09:54:23.8+00:00

Hello:
I upload a screen shot, so you can see it.
By the way, I want to know if it is possible to connect with one running Edge instance, and run some JavaScript from the Console tab. Not directly launch WebView2 and run JavaScript, but launch Edge browser by hand, then connect to it using it PID. I remember for old IE browser, MS seems have this type of Preview tools, but it has been in Preview until IE is no longer support.
Thanks,

Share via

Need help to run JavaScript in WebVeiw2

1 answer

Your answer