Run html5 inside android WebView

Question:

I have a page in html5, where I would like to be able to open it in the android's WebView, but it seems that the WebView doesn't interpret the javascript.

Is there a better WebView?

See my code:

MainActivity

package br.com.aaaa;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webview = new WebView(this);
        setContentView(webview);
        webview.loadUrl("http://www.hostcia.net/testes/html5Assinatura/");


    }
}

See: http://www.hostcia.net/testes/html5Assinatura/

The link above is from the test page where it is possible to mark points of the drawing. This structure will also be used for signing.

Answer:

Hello, we need to put permission on the Manifest:

 <uses-permission android:name="android.permission.INTERNET" />

Still in the Manifest, but inside the application, add:

android:usesCleartextTraffic="true"

Inside your Activity, before webview.loadUrl… add:

    webview.getSettings().setJavaScriptEnabled(true);
    webview.getSettings().setAppCacheEnabled(true);

Edit1:

Based on this link Detect Button Click

To process the button to retrieve the generated image and save it, create a new Class

and create the following methods:

 public static String parseBase64(String base64) {

        try {
            Pattern pattern = Pattern.compile("((?<=base64,).*\\s*)",Pattern.DOTALL|Pattern.MULTILINE);
            Matcher matcher = pattern.matcher(base64);
            if (matcher.find()) {
                return matcher.group();
            } else {
                return "";
            }
        } catch (Exception e) {
            e.printStackTrace();

        }
        return "";
    }
    public static void downloadFileFromBase64(String fileContent) {
        try {
            File file = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM), "Camera");
                file.mkdirs();
                if (fileContent != null) {
                    String attachment = parseBase64(fileContent);
                    byte[] byteArr = Base64.decode(attachment, Base64.DEFAULT);
                    File f = new File(file.getAbsolutePath(),"sample.png");
                    f.createNewFile();
                    FileOutputStream fo = new FileOutputStream(f);
                    fo.write(byteArr);
                    fo.close();
                }
                
            }catch (Exception e){
            e.printStackTrace();
        }
    }

These two methods parse base64 and save the image in the phone's camera directory.

In the Activity that is the webview, below the webview.loadUrl… add:

webview.addJavascriptInterface(new Object() {
           @JavascriptInterface           // For API 17+
           public void performClick(String strl)
           {
               //ação para o clique do botão "save"
               downloadFileFromBase64(strl);

           }
       }, "save");

To successfully save the image you need to give the Manifest permissions:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Even so, it is important to check if the permission has been given, so in your activity create the following method:

public static boolean hasPermissions(Context context, String... permissions) {
    if (context != null && permissions != null) {
        for (String permission : permissions) {
            if (ActivityCompat.checkSelfPermission(context, permission) != PackageManager.PERMISSION_GRANTED) {
                return false;
            }
        }
    }
    return true;
}

Still in activity, but inside onCreate(); add:

String[] permissions = {
                //aqui pode acrescentar todas as permissões que estão no Manifest
                android.Manifest.permission.WRITE_EXTERNAL_STORAGE,

        };
        if (!hasPermissions(this, permissions)) {
            ActivityCompat.requestPermissions(this, permissions, 1);
        }

IMPORTANT:

To be able to do this, I changed your html, following the link I based on, because as I said, I don't understand javascript, the changed html follows:

https://jsfiddle.net/wxjkb4Lt/3/

Scroll to Top