How to invoke javascript functions in a WebView in Universal Windows App

Question

I am new in Universal app development. Can any one help me into following code,

I have load one website using web view control in universal app. I want to read some control value from same website.

My label control id is 'lblDestination' on website.

I am accessing this in universal app like MAinPage.xaml

<WebView x:Name="Browser"  HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
                 Loaded="Browser_Loaded"
                 NavigationFailed="Browser_NavigationFailed">
</WebView>

MAinPage.xaml.cs

Browser.InvokeScript("eval", new string[] { "document.getElementById('lblDestination')" }).ToString()

Is this right way to read the browser control value? I am using the simulator for testing this app, So is simulator creating the problem?

Answer 1

I'm not sure where and when you use InvokeScript with the JavaScript eval function to inject content into the web page. But usually we can use WebView.DOMContentLoaded event. This event occurs when the WebView has finished parsing the current HTML content so with this event we can make sure the HTML content is prepared.

And If we want to invoke JavaScript inside the WebView content in Windows 10 Universal app, we'd better use WebView.InvokeScriptAsync method as

[InvokeScript may be altered or unavailable for releases after Windows 8.1. Instead, use InvokeScriptAsync.]

Last but not least, please do note that the InvokeScriptAsync method can only return the string result of the script invocation.

The invoked script can return only string values.

So if the return value of your JavaScript is not a string, the return value of WebView.InvokeScriptAsync method will be a empty string.

If you use

var value = await Browser.InvokeScriptAsync("eval", new string[] { "document.getElementById('lblDestination')" });

the value will be a empty string as document.getElementById('lblDestination') returns an Element.

So to read some control value, you can try using code like following:

var innerText = await Browser.InvokeScriptAsync("eval", new string[] { "document.getElementById('lblDestination').innerText" });

And if the value you want to get is not a string, you may need to convert it to string in JavaScript first. For example:

var childElementCount = await Browser.InvokeScriptAsync("eval", new string[] { "document.getElementById('lblDestination').childElementCount.toString()" });