CODEWITHSUNDEEP
javascriptc#webviewuwpwindows-10-universal
Kinjan Bhavsar
Kinjan Bhavsar

Reputation: 1449

How to invoke javascript in WebView Windows 10 UWP?

I am trying to load a javascript in WebView to do some calculations and get the output in a string. I tried to use following code

string htmlFragment = "<html><head><script type='text/javascript'>" +
                    "function doubleIt(incoming){ " +
                    "  var intIncoming = parseInt(incoming, 10);" +
                    "  var doubled = intIncoming * 2;" +
                    "  document.body.style.fontSize= doubled.toString() + 'px';" +
                    "  return doubled.toString());" +
                    "};" +
                    "</script></head><body>" +
                    "<div id = 'myDiv'>I AM CONTENT</div></body></html>";
            htmlView.NavigateToString(htmlFragment);
            htmlView.LoadCompleted += async(s1,e1) =>
              {
                  string result = await htmlView.InvokeScriptAsync("eval", new string[] { "doubleIt(25)" });
                  Debug.WriteLine(result);
              };

Update I am able to load simple javascript easily now based on help provided in the answer. But now I am facing issues when there is more than one function in javascript, I am getting an exception. I am trying the following code

string htmlFragment = @"<html><head><script type='text/javascript'>" +
                    "function a(){return 10;};" +
                    "function b(){return 20;};" +
                    "function c(){return 30;};" +
                    "return (a()*b()*c());" +
                    "</script></head><body>" +
                    "<div id = 'myDiv'>I AM CONTENT</div></body></html>";

Please suggest.

Upvotes: 4

Views: 8236

Answers (3)

Jean-Claude Colette
Jean-Claude Colette

Reputation: 937

The question is already 4 years old, but I'm coming to see why you were getting an empty string as a result.

In your example, the functions in JavaScript return integers while the expected value is of type string.

By modifying these functions and returning a string like this:

string htmlFragment = @"<html><head><script type='text/javascript'>" +
                    "function a(){return '10';};" +
                    "function b(){return '20';};" +
                    "function c(){return '30';};" +
                    "</script></head><body>" +
                    "<div id = 'myDiv'>I AM CONTENT</div></body></html>";

We get the good result on the way back.

Upvotes: 0

Leonid Z
Leonid Z

Reputation: 161

Anthony, Try to check your own suggestion:

 await webViewer.InvokeScriptAsync("eval", 
  new string[] 
  { 
    "functionName(functionParams)" 
  });

or:

await webViewer.InvokeScriptAsync(functionName, new string[]{ functionParameters });

The same as Microsoft suggests, just you are limiting a function name by one ("eval") - not necessary. Trust me, you can use any function name, as I am now with UWP and before with windows phone hybrid apps.

Upvotes: 1

DotNetRussell
DotNetRussell

Reputation: 9857

The documentation for this feature is really poor. It took me some time to figure out how to invoke Javascript in UWP WebView

When you first look at the function call webView.InvokeScriptAsync(string,string[]) your initial reaction is that they want the function name as the first parameter and then the function paramaeters as the string array. (mainly because the MSDN documentation says this)

Parameters

scriptName

Type: System.String [.NET] | Platform::String [C++]

The name of the script function to invoke.

arguments

Type: System.String[] [.NET] | Platform::Array [C++]

A string array that packages arguments to the script function.

HOWEVER, this is wrong and will lead to hours of head banging. REALLY, what they want is the word "eval" in the first parameter and then a string array of functions, and or commands you wish to eval

   var value = await webViewer.InvokeScriptAsync("eval", 
      new string[] 
      { 
        "functionName(functionParams)" 
      });

Having worked with Microsoft APIs for a few years now I am convinced that this is not the intended way of consuming this function and is a bit of a hack. Unfortunately if you want to consume JavaScript this is the only way that I know that works currently.

Upvotes: 7

Related Questions