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.

 

[RB Smissaert]

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]

Thanks for the assistance.

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.

 

[RB Smissaert]

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.

Realised that and have posted to the question forum.

RBS

 

[Ulhas Rane]

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

 

[rraswisak]

I did not get any alert from javascript

Call addWebChromeClient first before loading html file

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

 

[Ulhas Rane]

Call addWebChromeClient first before loading html file

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]

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.

<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

 

[Ulhas Rane]

You can pass up to 3 parameters.

<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

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]

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:

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:

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

 

[Hasan Ali]

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

From b4a with passing 3 parameter

Like this?

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

 

[Ulhas Rane]

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:

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:

<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

 

[Ulhas Rane]

Like this?

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

 

[hmdfar]

Call addWebChromeClient first before loading html file

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

It doesn't work for me at all
And by pressing the button, it does not display anything

 

[a6000000]

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

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

download zip : http://www.mediafire.com/file/i5oudy5ila1d8al/30js2B4J2js.zip/file // JSBridge, executejavascript, setBridge(WebEngine we), we.executeScript("window"), class Bridge, javafx.scene.web.WebEngine ' B4J ! #Region Project Attributes #MainFormWidth: 600...

www.b4x.com

 

[a6000000]

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

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

addJavascriptInterface [WebViewExtras] CallSub [B4XPages] Example I created a Example (after search and not found) send data: from WebView to B4X / from B4X to WebView , using addJavascriptInterface and CallSub, thre are sam B4XPages also, hope it's useful, and there are some room...

www.b4x.com

download zip