Xamarin forms invoking javascript from webview

Question

The android project in the sample as described in this article does not work. The iOS project works exactly as described in the article. The Android does nothing. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/webview?tabs=macos

This is kind of urgent as we need this functionality.

Answer 1

Hello,

============Update===========

The complete project can be found here: https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/customrenderers-hybridwebview/. This is sample code from MSFT. The Android version does not work the same as the Apple version.

The "index.html" in the Assets folder of the Project, which is used in the Webview, references a quite old version of JQuery. Just update the version from "http://code.jquery.com/jquery-2.1.4.min.js" to "https://code.jquery.com/jquery-3.5.1.min.js" and it should work again in the "index.html".

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.

Answer 2

To invoke JavaScript code from a WebView in Xamarin.Forms, you can use the EvaluateJavaScriptAsync method provided by the WebView control.

Here's an example of how to use this method:

First, define a WebView control in your XAML code:
xml
Copy code
<WebView x:Name="myWebView" />
Next, in your code-behind file, you can use the EvaluateJavaScriptAsync method to invoke JavaScript code on the WebView:
csharp
Copy code
// Load a web page into the WebView
myWebView.Source = new UrlWebViewSource { Url = "http://www.example.com" };

// Invoke a JavaScript function on the page
string result = await myWebView.EvaluateJavaScriptAsync("myFunction();");

// Use the result of the JavaScript function
Console.WriteLine(result);
In this example, we're first loading a web page into the WebView using the Source property. Then, we're invoking a JavaScript function called myFunction using the EvaluateJavaScriptAsync method. The result of the function is returned as a string, which we can then use in our code. Finally, we're printing the result to the console using Console.WriteLine.

Note that you should make sure the web page is fully loaded before invoking any JavaScript functions on it. You can use the Navigated event of the WebView to determine when the page has finished loading:

csharp
Copy code
myWebView.Navigated += (sender, args) =>
{
    // Page has finished loading, now we can invoke JavaScript
    string result = await myWebView.EvaluateJavaScriptAsync("myFunction();");
    Console.WriteLine(result);
};
In this example, we're subscribing to the Navigated event of the WebView, which is triggered when the page has finished loading. Then, we're invoking the JavaScript function and printing the result to the console.

Answer 3

In Xamarin.Forms, you can invoke JavaScript code from a WebView using the EvaluateJavaScriptAsync method. Here's an example:

First, add a WebView to your XAML code:

xml
Copy code
<WebView x:Name="myWebView" />
Then, in your code-behind file, you can use the EvaluateJavaScriptAsync method to execute JavaScript code:

csharp
Copy code
// Load the web page
myWebView.Source = "https://example.com";

// Wait for the web page to finish loading
myWebView.Navigated += async (sender, e) =>
{
    // Execute JavaScript code
    var result = await myWebView.EvaluateJavaScriptAsync("alert('Hello from Xamarin.Forms!')");
};
In this example, the Source property of the WebView is set to a web page. Then, the Navigated event is used to wait for the web page to finish loading. Finally, the EvaluateJavaScriptAsync method is used to execute the JavaScript code alert('Hello from Xamarin.Forms!'). The await keyword is used to wait for the result of the JavaScript code execution, which in this case will be null.

You can replace the JavaScript code with any valid JavaScript code that you want to execute in the WebView. Note that the EvaluateJavaScriptAsync method is an asynchronous method, so you should await the result before continuing with other code.