Android Code Snippet WebViewExtra: Call B4A Sub from WebView

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.
 

Attachments

  • webext_sample.zip
    9.8 KB · Views: 420
Last edited:

RB Smissaert

Well-Known Member
Licensed User
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.

Have tried your demo and it works, but my situation is quite different.
My WebView doesn't load a URL from file, but instead a Web URL.
I set some values on this Webpage and then need to get a value from
an element of this webpage. As I couldn't figure out how to just get this
value only I thought it might be easier to get the whole Html and then parse
that value out.
Do I understand right that I need to add your function doCallBack somehow to
the Html and then run that callback. If that is the case how do I had that function?

This is the website I am dealing with:
https://qrisk.org/three/

Thanks for the assistance.

RBS
 

DonManfred

Expert
Licensed User
Last edited:
Hello,

Is there any way to pass parameters to javascript function like

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

and in html script file function modified as below

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

I did not get any alert from javascript
I would like the parameters to javascript function, i know vice versa parameter passing method is available but not B4A to javascript



Is there any method exists?

Regards

Ulhas
 
Last edited:

rraswisak

Active Member
Licensed User
I did not get any alert from javascript

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
 
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
Thanks
It is already there in code . My concern is that i want to pass parameter to JavaScript function from b4a code
 

Hasan Ali

Member
Licensed User
Is there any way to pass parameters to javascript function like

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

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
 
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
Thanks , above method is for passing parameter from JavaScript to b4a function

And i want to pass parameter from b4a to JavaScript function ie exactly opposite to your example


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

From b4a with passing 3 parameter
 

rraswisak

Active Member
Licensed User
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>

1619588147790.png
 

Hasan Ali

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

From b4a with passing 3 parameter

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
 
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
Thanks this work perfectly
 
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
Thanks this too work perfectly
 
Top