B4A Library WebViewExtras

warwound · Nov 7, 2011

Hi all.

WebViewExtras is my latest library.
It's a much updated version of JSInterface.

WebViewExtras exposes more of the available native Android WebView methods to your B4A application:

addJavascriptInterface(webView1 As WebView, interfaceName As String)

Add a javascript interface to webView1, methods of the interface can be accessed using javascript with the interfaceName as the javascript namespace.

The interface contains just a single overloaded method CallSub().
The CallSub method signatures are:

CallSub(subName As String, callUIThread As boolean)
CallSub(subName As String, callUIThread As boolean, parameter1 As String)
CallSub(subName As String, callUIThread As boolean, parameter1 As String, parameter2 As String)
CallSub(subName As String, callUIThread As boolean, parameter1 As String, parameter2 As String, parameter3 As String)

So if you have added the interface to your webView with the interfaceName of "B4A" then you can write javascript such as:

B4X:

B4A.CallSub('MySubName', true)

The callUIThread parameter is an important update - it's not available with JSInterface.

Does the Sub called by your javascript modify your activity UI?
If the answer is yes then you need to pass boolean true as callUIThread otherwise you can pass false.
If you pass false and then the Sub tries to modify your activity UI you will get an exception.

Does your javascript require a return value from your Sub?
If the answer is yes then the Sub MUST NOT modify the activity UI.
If CallSub is excuted with callUIThread set to true then no values will be returned from your Sub to the javascript.

You will need to structure your B4A code so that Subs that return values to javascript do not modify the activity UI.

addWebChromeClient(webView1 As WebView, EventName As String)

Add a WebChromeClient to webView1.

The default B4A WebView has no WebChromeClient.
A WebChromeClient handles many things, the WebChromeClient that WebViewExtras adds to your WebView enables:

Javascript modal dialogs: alert, prompt and confirm.
Logging of javascript console messages and errors to the B4A log.
File upload dialog - see http://www.b4x.com/forum/additional-libraries-official-updates/12453-webviewextras-2.html#post97320.
Web page requests for device geolocation can be granted or denied - see http://www.b4x.com/forum/additional-libraries-official-updates/12453-webviewextras-2.html#post102448.

Version 1.30 of WebViewExtras requires that an additional EventName parameter is passed to the addWebChromeClient method, see this post: http://www.b4x.com/forum/additional-libraries-official-updates/12453-webviewextras-2.html#post102448

clearCache(webView1 As WebView, includeDiskFiles As boolean)

Clear the WebView cache.
Note that the cache is per-application, so this will clear the cache for all WebViews used in an application.

boolean includeDiskFiles - If false, only the RAM cache is cleared.

executeJavascript(webView1 As WebView, javascriptStatement As String)

Executes a string of one or more javascript statements in webView1.
javascriptStatement - A string of one or more (semi-colon seperated) javascript statements.

flingScroll(webView1 As WebView, vx As Int, vy As Int)

flingScroll is a poorly documented method of the WebView.
It's included in WebViewExtras as it may be useful but i can find no documentation for it or it's parameters.

vx and vy do not seem to be pixel values - i suspect they are velocity values for the kinetic/fling scroll.

pageDown(webView1 As WebView, scrollToBottom As boolean)

Scroll the contents of webView1 down by half the page size.

scrollToBottom - If true then webView1 will be scrolled to the bottom of the page.

Returns a Boolean value to indicate the success or failure of the scroll.

pageUp(webView1 As WebView, scrollToTop As boolean)

Scroll the contents of webView1 up by half the page size.

scrollToTop - If true then webView1 will be scrolled to the top of the page.

Returns a Boolean value to indicate the success or failure of the scroll.

zoomIn(webView1 As WebView)

Perform zoom in on webView1.

Returns a Boolean value to indicate the success or failure of the zoom.

zoomOut(webView1 As WebView)

Perform zoom out on webView1.

Returns a Boolean value to indicate the success or failure of the zoom.

Up to date documentation/reference for this library can be found here: http://www.b4x.com/forum/additional-libraries-official-updates/12453-webviewextras-3.html#post106486.

Library and demo code is attached to this post.

The demo is a bit brief - sorry but i don't have time to write demo code for all the new methods.
The demo displays two WebViews - the top WebView has a JavascriptInterface and WebChromeClient whereas the lower WebView has neither - it is the default B4A WebView.

Martin.

Edit by Erel:
- There is a security issue related to AddJavascriptInterface in older versions of Android. See this link: https://www.b4x.com/android/forum/t...ascriptinterface-vulnerability.85032/#content
- v2.20 is attached. This is the latest version.

LBGroup · Feb 26, 2015

Hello, I'm in the process of porting over a web app that we use internally at our company from using the SureFox platform (basically locks our tablets in a browser mode locked on one web page) to writing a custom app that just wraps our internal web site in a WebView. So far all was going well until the file uploads wouldn't work. I found this library, installed it, and that brought back file uploads. The problem is that now it only allows files to be uploaded from Gallery or the Photos app. There isn't an option for Camera. In SureFox (or just the regular browser) Camera is an option. What do you advise?

Hardware: Nexus 7 2014 with 4.3 Jellybean.

Overlord · Apr 23, 2015

Hello Does anybody have an idea to do some file upload on kitkat ?

DonManfred · Apr 23, 2015

Overlord said:
Hello Does anybody have an idea to do some file upload on kitkat ?

I´m not sure if this issue is related to webviewextras.
Maybe you should create a new thread for it. Maybe the issue is related to webviewextras, maybe to the b4a webview itself.

warwound · Apr 23, 2015

Overlord said:
Hello Does anybody have an idea to do some file upload on kitkat ?

Have a read here:
https://www.b4x.com/android/forum/t...eclient-file-upload-dialog.52355/#post-328003

I don't think anyone on the forum is really sure what the situation is.

oceanwanderlust · Jun 1, 2015

My app loads a webpage, then uses JavaScript to inspect the state of the page or occasionally automatically push a button on the webpage. I'm using a timer to automatically reload the webpage every few minutes. The program runs fine for a while, but then eventually I quit receiving _PageFinished events even though Timer3 keeps reloading the page. Why do I suddenly stop receiving _PageFinished messages? Am I reloading the page correctly?

joe

EDIT: removing code because unrelated to solution

warwound · Jun 1, 2015

What does your ProcessHTML sub do?
Does it modify the user interface (views etc)?

Is that causing a problem?

oceanwanderlust · Jun 1, 2015

ProcessHTML checks if the page is properly displaying one of two webpages, if not, it starts yet another Timer2 to try to reload the page again quickly and maybe fiddle with the wifi. My problem is that eventually _PageFinished is not called so ProcessHTML never gets called, even though Timer3 IS being called and is supposed to be reloading WebView1 every few minutes.

EDIT:

1) removing code because unrelated to solution

Summary/Solution: As my app demonstrated after many Reloads, WebView simply fails to call PageFinished. I had already injected javascript into the page, so Warwound's solution to use "javascript Location reload() method to reload" reliably reloads it infinitely.

warwound · Jun 2, 2015

Hmm...

Well if your ProcessHTML Sub causes any part of the user interface to be modified then you need to change your javascript:

B4X:

Javascript="B4A.CallSub('ProcessHTML', true, document.documentElement.outerHTML)"

I've changed the second parameter to true from false.
That's worth trying - it won't take long to change and might be a quick fix.

Otherwise i'm not sure where to look next.
You could try using the javascript Location reload() method to reload the webpage instead of using the WebView Reload method.

I suspect there is no error in your code and that the WebView is just failing after the webpage has been reloaded many times.

Swissmade · Jun 2, 2015

Please place your Code in Code Insert so this will be better to read.
Like see below.

B4X:

Sub ProcessHTML(FlingableWebView1 As FlingableWebView, Html As String)
If Html.Contains(ACTIVE_STATE_STRING) = True Then
Timer1.Enabled = False
Else If Html.Contains(INACTIVE_STATE_STRING) = True Then
If Timer1.Enabled = False Then
Timer1.Enabled = True    'this timer does a JavaScript Click() on the page in about an hour...
End If
Else
Log("PAGE ERROR")
Timer2.Enabled=True  'this timer tries to refresh the webpage in ~10 seconds and also fiddles with the wifi
End If
End Sub

Thanks

oceanwanderlust · Jun 2, 2015

Why am I getting a runtime "signature does not match expected signature" for HandleDoorbellWebview_ReceivedError? I think this might be an interesting message to catch, and also shows that I might be misunderstanding something about webview vs webviewclient events.

joe

warwound · Jun 3, 2015

Depending on the version of WebViewExtras you are using the event passes different parameters.

With WebViewExtras2 the Sub parameters are:

B4X:

ReceivedError(ErrorCode As int, Description As String, FailingUrl As String)

A version i created for the FlingableWebView has parameters:

B4X:

ReceivedError(FlingableWebView1 As FlingableWebView, ErrorCode As int, Description As String, FailingUrl As String)

The solution is to use the b4a IDE autocomplete to see what parameters are required for the version you are using.

In your activity module start a new line.
Type Sub then space and then press the TAB key.
Select DefaultWebViewClient from the drop down liat and then select the ReceivedError event.
The IDE will create the Sub with the parameters required.

oceanwanderlust · Jun 3, 2015

Thankyou for taking the extra time to write out the IDE instructions. That was very helpful.

Croïd · Jun 20, 2015

Please ! how can we insert the web text "class" in a EditText ?

For example : WebView1.LoadUrl("https://www.b4x.com/index.html")

WebViewExtras1.executeJavascript(WebView1, "B4A.CallSub('Javascript', true,document.title)")

Edittext Show = <title>B4X - The simple way to develop native Android & iOS apps</title>

It is possible read : <span class="title">Latest Versions</span>

FJS · Jun 20, 2015

Hello everybody,

I am trying to use the following html code:

<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=xxxxxxxxx"></script>

As you can see, the idea is showing ads,

with a webview like:

WebView1.LoadHtml("<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=xxxxxxxxx"></script>")

however it has a syntax error... and only the text apears

Please, any expert could you tell me how white right the information?

Thank you!

warwound · Jun 21, 2015

FJS said:
WebView1.LoadHtml("<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=xxxxxxxxx"></script>")

Doesn't the IDE give you a syntax error on that line with those double quotes within a string?
I'd try something like this:

B4X:

WebView1.LoadHtml("<script type='text/javascript' src='http://ad.leadboltads.net/show_app_ad.js?section_id=xxxxxxxxx'></script>")

If that still fails then you probably need to pass a valid page of HTML to the LoadHtml method instead of a single <script> tag:

B4X:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type='text/javascript' src='http://ad.leadboltads.net/show_app_ad.js?section_id=xxxxxxxxx'></script>
</head>
<body>
</body>
</html>

Derek Johnson · Jun 21, 2015

Croïd said:
Please ! how can we insert the web text "class" in a EditText ?

For example : WebView1.LoadUrl("https://www.b4x.com/index.html")

WebViewExtras1.executeJavascript(WebView1, "B4A.CallSub('Javascript', true,document.title)")

Edittext Show = <title>B4X - The simple way to develop native Android & iOS apps</title>

It is possible read : <span class="title">Latest Versions</span>

Something like:

B4X:

Sub Webview1_PageFinished (Url As String)
    '...
    Get1stElementByClass("title")

End Sub

Sub Get1stElementByClass(id As String)

Dim js As String=$"
    var elems = document.getElementsByClassName('${id}');
    if (elems.length>0) {
        B4A.CallSub('j_result', true, elems[0].innerHTML )
    } else {
        B4A.CallSub('j_result', true, '' )
    }
"$
    WebViewExtras1.executeJavascript(WebView1,js)
End Sub


Sub j_result(result As String)
    Log("Result was " & result )
    'edittext1.text=result

End Sub

I've corrected my original post having checked it out with an example.

Croïd · Jun 21, 2015

Derek Johnson said:

Something like:

B4X:

Sub Webview1_PageFinished (Url As String)
    '...
    Get1stElementByClass("title")

End Sub

Sub Get1stElementByClass(id As String)

Dim js As String=$"
    var elems = document.getElementsByClassName(${id})
    If (elems.length>0) {
        B4A.CallSub('j_result', true, elems[0].innerHTML )
    } else {
        B4A.CallSub('j_result', true, '' )
    }
"$
    WebViewExtras1.executeJavascript(WebView1,js)
End Sub


Sub j_result(result As String)
    Log("Result was " & result )
    'edittext1.text=result

End Sub

Many Thanks Derek

Derek Johnson · Jun 21, 2015

Croïd said:
Many Thanks Derek

Croid - There is a minor syntax error in my original post. (The 'if' statement had a capital 'I' ). Please use the post as it is now.

Croïd · Jun 21, 2015

Derek Johnson said:
Croid - There is a minor syntax error in my original post. (The 'if' statement had a capital 'I' ). Please use the post as it is now.

Derek I need to put additional ?

Derek Johnson · Jun 21, 2015

Croïd said:
Derek I need to put additional ?

Sorry missing a couple of quote marks in the Javascript. This code works now.

B4X:

Sub WebView1_PageFinished (Url As String)

'find  <span class="title">Latest Versions</span>
    Get1stElementByClass("title")
End Sub


Sub Get1stElementByClass(id As String)
Dim js As String=$"
    var elems = document.getElementsByClassName('${id}');
    if (elems.length>0) {
        B4A.CallSub('j_result', true, elems[0].innerText )
    } else {
        B4A.CallSub('j_result', true, 'No element found' )
    }
"$
    WebViewExtras1.executeJavascript(WebView1,js)
End Sub

Sub j_result(result As String)
   Log("Result was " & result )
    EditText1.text= result
End Sub

B4A Library WebViewExtras

Attachments

New Member

New Member

Expert

Expert

Member

Expert

Member

Expert

Well-Known Member

Member

Expert

Member

Active Member

Active Member

Expert

Active Member

Active Member

Active Member

Active Member

Attachments

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency