Nerd For Tech
Published in

Nerd For Tech

JavaScript to Xamarin.Forms Two Way Communication Setup

How to set up communication between WebView JavaScript and Xamarin.Forms Application

Hello Folks 👋!!! Before switching this year to MAUI, let’s summarise not a typical case — communication with JavaScript through WebView. This blog post will show you how to set up JS to XF and XF to JS Commands for Android and iOS.

For our example, we will send some info and show an alert with delay. And react to some HTML button inside Xamarin App.

Prepare WebView

At First, we need to create a new Custom Control inherited from WebView. Also, it will contain a function to call predefined JS Function and Action, which WebView will call from JS.

CustomWebView can use it in the following way in code behind Popup or Page.

JavaScript Binding at iOS

For iOS is enough to create one renderer; let’s name it CustomWebViewRenderer. It should be inherited from WkWebViewRenderer and implement IWKScriptMessageHandler an interface. Also, it should contain a definition of our JS Function InvokeDisplayJSText and registration of our Script Message Handler. Yep, not so much is needed for iOS. Here is the complete renderer code:

JavaScript Binding at Android

For Android is slightly more complex, but implementation also starts from creating a renderer, let’s give it the same name CustomWebViewRenderer. It should be inherited from WebViewRenderer. Also, it should contain a definition of our JS Function InvokeDisplayJSText (similar to iOS) and registration of our custom JSBridge and JavascriptWebViewClient.

Definition of JavascriptWebViewClient is quite simple — it just needs to load defined JS Script when WebView will load page.

Definition of JSBridge won’t be more complex. We need to export JS Interfaces with the same name defined by our JS Code.

Now we are loading JS and executing Xamarin Code via JS Bridge 🙃

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

Choosing your next Javascript framework

History Of JavaScript: Everything You Need To Know

Introducing Syncfusion Angular Code Snippets for Visual Studio Code

Introducing Syncfusion Angular Code Snippets for Visual Studio Code

SAX parser in java with full code and explanation

The wondrous world of Javascript addons

ERC20 Tokens on HyperLedger Fabric

Reference Other Values in Helm Chart Values File

React State Management: Hook

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
🇺🇦 Bohdan Benetskyi

🇺🇦 Bohdan Benetskyi

Microsoft MVP | C# .Net | Xamarin

More from Medium

Xamarin Forms: Client-Side caching

Usage of Constant file in Flutter

Making Strategies — An example of the Strategy pattern with the Factory pattern

[Dot Net Core](Graphic series ) 13. Example of Delegation technique to keep memory contents