Android Question Help with Javascript

Mark Read · Mar 27, 2014

As a possible solution to my own post ( here ) I have found this code:

B4X:

<html><head><title>Test</title>
</head><body>
<img src="christa.jpg" name="Christa" alt="Christa">
<script type="text/javascript">
document.write(document.Christa.name + "<br>");
document.write(document.Christa.width + " x " + document.Christa.height + " Pixel");
</script>
</body></html>

Could someone please translate this so that I can use it to get the height and width in an array or two variables. The html page contains just a single image, whereby the name changes.

Maybe Warwound, the Javascript Guru?

warwound · Mar 27, 2014

Here's a possible solution:

PHP:

<!DOCTYPE html>
<html>
   <head>
     <title></title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style type="text/css">
       html{
         margin:0;
         padding:0;
       }
       body{
         margin:0;
         padding:0;
       }
     </style>
     <script type="text/javascript">
       function callB4ASub(image1){
         var imageProperties={};
         imageProperties.height=image1.height;
         imageProperties.width=image1.width;
         imageProperties.src=image1.src;
         var jsonString=JSON.stringify(imageProperties);
         B4A.CallSub("HandleJavascript", true, jsonString);
       }
     </script>
   </head>
   <body>
     <img src="http://upload.wikimedia.org/wikipedia/commons/d/d8/Basic4android-Logo.jpg" onload="callB4ASub(this)">
   </body>
</html>

I've set an 'onload' listener to the img element, the listener calls the javascript funtion callB4ASub and passes a reference to the image to the javascript function once the image has loaded.

The javascript gets the image height, src and width properties, creates a JSON string and sends the string to a B4A Sub named HandleJavascript:

B4X:

Sub Process_Globals
End Sub
Sub Globals
   Dim WebView1 As WebView
End Sub
Sub Activity_Create(FirstTime As Boolean)
   WebView1.Initialize("WebView1")
  
   Dim WebViewExtras1 As WebViewExtras
   WebViewExtras1.Initialize(WebView1)
  
   Dim JavascriptInterface1 As DefaultJavascriptInterface
   JavascriptInterface1.Initialize
  
   WebViewExtras1.AddJavascriptInterface(JavascriptInterface1, "B4A")
  
   WebViewExtras1.LoadUrl("file:///android_asset/mark35at.html")
  
   Activity.AddView(WebView1, 0, 0, 100%x, 100%y)
End Sub
Sub Activity_Resume
End Sub
Sub Activity_Pause (UserClosed As Boolean)
End Sub
Sub HandleJavascript(Message As String)
   '   this Sub is called by the WebView javascript
   Log("HandleJavascript: "&Message)
  
   '   you will need to parse the Message as a JSON object:
   '   {"height":270,"width":336,"src":"http://upload.wikimedia.org/wikipedia/commons/d/d8/Basic4android-Logo.jpg"}
End Sub

Now in B4A you can parse the string that HandleJavascript has received and get the values you require.

You can add such an onload listener to any HTML img element if you have control over the content of the webpage.
If you have no control over the content of the webpage then you'd need to inject the javascript once the webpage has loaded - post again if you need to do this.

You can download the new WebViewExtras2 library from: http://b4a.martinpearman.co.uk/webviewextras/WebViewExtras2-20140318.zip.

Martin.

Mark Read · Mar 27, 2014

Martin, you are amazing!! Thx

Android Question Help with Javascript

Mark Read

Well-Known Member

warwound

Expert

Attachments

Mark Read

Well-Known Member