Android Code Snippet WebViewExtra: Call B4A Sub from WebView

rraswisak said:

Hi All,

Here with Attached simple project to demonstrate how to call B4A Sub in WebView using WebViewExtra (v1.42).

I'm not play often with this lib, but found some interest on how B4A can interact with WebView via Javascript.

The project will:
- Load html from asset
- Call Javascript function inside html file from B4A
- The Javascript will call B4A sub and display as a response

I hope it would be useful for everyone who interest.

Click to expand...

RB Smissaert said:

Thanks for the assistance.

Click to expand...

DonManfred said:

This is not the correct place for your issue. This is the CodeSnippet forum.

You should create a new thread for any issue you have.

start with this code.

Click to expand...

Ulhas Rane said:

I did not get any alert from javascript

Click to expand...

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")
    we.addJavascriptInterface(WebView1,"B4A")
    we.addWebChromeClient(WebView1,"") '<--- add this line
    WebView1.LoadUrl(WebViewAssetFile("index.html"))
End Sub

rraswisak said:

Call addWebChromeClient first before loading html file

B4X:

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")
    we.addJavascriptInterface(WebView1,"B4A")
    we.addWebChromeClient(WebView1,"") '<--- add this line
    WebView1.LoadUrl(WebViewAssetFile("index.html"))
End Sub

Click to expand...

Ulhas Rane said:

Is there any way to pass parameters to javascript function like

WebViewExtras.executeJavascript(WebView1,"javascript: doCallBack('Parameter1,Parameter2,Parameter3');")

Click to expand...

<script>
  function doCallBack(Parameter1, Parameter2, Parameter3) {
    //var content = document.body.textContent;
    B4A.CallSub('TheContentIs', true, Parameter1, Parameter2, Parameter3);                             
  }
</script>

Sub TheContentIs(Parameter1 As String, Parameter2 As String, Parameter3 As String) 'ignore
    MsgboxAsync($"Parameter1: ${Parameter1}${CRLF}Parameter2: ${Parameter2}${CRLF}Parameter3: ${Parameter3}${CRLF}"$,"Content From JS")
End Sub

Hasan Ali said:

You can pass up to 3 parameters.

JavaScript:

<script>
  function doCallBack(Parameter1, Parameter2, Parameter3) {
    //var content = document.body.textContent;
    B4A.CallSub('TheContentIs', true, Parameter1, Parameter2, Parameter3);                             
  }
</script>

B4X:

Sub TheContentIs(Parameter1 As String, Parameter2 As String, Parameter3 As String) 'ignore
    MsgboxAsync($"Parameter1: ${Parameter1}${CRLF}Parameter2: ${Parameter2}${CRLF}Parameter3: ${Parameter3}${CRLF}"$,"Content From JS")
End Sub

Click to expand...

Ulhas Rane said:

In short how do i call
function doCallBack(Parameter1, Parameter2, Parameter3)

From b4a with passing 3 parameter

Click to expand...

Sub Button1_Click
    Dim Parameter1 As String = "content"
    Dim Parameter2 As String = "content"
    Dim Parameter3 As String = "content"
   
    we.executeJavascript(WebView1, $"
      function doCallBack(a, b, c) {
          // do something with vars
          a = a + " 1";
          b = b + " 2";
          c = c + " 3";
          B4A.CallSub('TheContentIs', false, a, b, c);                            
      }
      doCallBack("${Parameter1}", "${Parameter2}", "${Parameter3}");
    "$)
End Sub

rraswisak said:

As i said in post #6, all you need is add we.addWebChromeClient(WebView1,"") before open html file. This line not exist in the project sample at post #1.

This code work for me:

B4A:

B4X:

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")
    we.addJavascriptInterface(WebView1,"B4A")
    we.addWebChromeClient(WebView1,"")
    WebView1.LoadUrl(WebViewAssetFile("index.html"))
End Sub

Sub Button1_Click
    we.executeJavascript(WebView1,"javascript: doCallBack('hi there...','this parameter from B4A');")
End Sub

Html:

B4X:

<script>
  function doCallBack(a,b) {
    alert(a + ', ' + b);
    var content = document.body.textContent;
    B4A.CallSub('TheContentIs', true, content);
  }
</script>

View attachment 112404

Click to expand...

Hasan Ali said:

Like this?

B4X:

Sub Button1_Click
    Dim Parameter1 As String = "content"
    Dim Parameter2 As String = "content"
    Dim Parameter3 As String = "content"
  
    we.executeJavascript(WebView1, $"
      function doCallBack(a, b, c) {
          // do something with vars
          a = a + " 1";
          b = b + " 2";
          c = c + " 3";
          B4A.CallSub('TheContentIs', false, a, b, c);                           
      }
      doCallBack("${Parameter1}", "${Parameter2}", "${Parameter3}");
    "$)
End Sub

Click to expand...

rraswisak said:

Call addWebChromeClient first before loading html file

B4X:

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")
    we.addJavascriptInterface(WebView1,"B4A")
    we.addWebChromeClient(WebView1,"") '<--- add this line
    WebView1.LoadUrl(WebViewAssetFile("index.html"))
End Sub

Click to expand...

B4J Code Snippet [B4J] send string msg from WebView js 2 B4J - and from B4J to WebView javascript​

Android Example [WebViewExtras] send data: from WebView to B4X / from B4X to WebView [addJavascriptInterface] [CallSub]​