Android
WebView

Introduction

Remarques

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

Dialogues d'alerte JavaScript dans WebView - Comment les faire fonctionner

Par défaut, WebView n'implémente pas les boîtes de dialogue d'alerte JavaScript, c.-à-d. alert() ne fera rien. Pour que vous deviez activer JavaScript (évidemment ..), puis définir un WebChromeClient pour gérer les demandes de boîtes de dialogue d'alerte à partir de la page:

webView.setWebChromeClient(new WebChromeClient() {
    //Other methods for your WebChromeClient here, if needed..

    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        return super.onJsAlert(view, url, message, result);
    }
});

Ici, nous onJsAlert , puis nous appelons la super implémentation, ce qui nous donne une boîte de dialogue Android standard. Vous pouvez également utiliser le message et l'URL vous-même, par exemple si vous souhaitez créer une boîte de dialogue personnalisée ou si vous souhaitez les enregistrer.

Communication de Javascript vers Java (Android)

Activité Android

package com.example.myapp;

import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;

public class WebViewActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    
        WebView webView = new WebView(this);
        setContentView(webView);

       /* 
        *   Note the label Android, this is used in the Javascript side of things
        *   You can of course change this.
        */
        webView.addJavascriptInterface(new JavascriptHandler(), "Android");
    
        webView.loadUrl("http://example.com");
    }
}

Java Javascript Handler

import android.webkit.JavascriptInterface;

public class JavascriptHandler {

    /**
     *  Key point here is the annotation @JavascriptInterface
     *
     */
    @JavascriptInterface
    public void jsCallback() {
       // Do something
    }

    @JavascriptInterface
    public void jsCallbackTwo(String dummyData) {
       // Do something
    }
}

Page Web, appel Javascript

<script>
... 
Android.jsCallback();
...
Android.jsCallback('hello test');
...
</script>

Conseil supplémentaire

En passant dans une structure de données complexe, une solution possible est d'utiliser JSON.

Android.jsCallback('{ "fake-var" : "fake-value", "fake-array" : [0,1,2] }');

Du côté Android, utilisez votre analyseur JSON préféré, à savoir: JSONObject

Communication de Java à Javascript

Exemple de base

package com.example.myapp;

import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;

public class WebViewActivity extends Activity {
    
    private Webview webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);

       webView = new WebView(this);
       webView.getSettings().setJavaScriptEnabled(true);

       setContentView(webView);

       webView.loadUrl("http://example.com");

       /*
        * Invoke Javascript function
        */
       webView.loadUrl("javascript:testJsFunction('Hello World!')");
    }

   /**
    * Invoking a Javascript function
    */
   public void doSomething() {
     this.webView.loadUrl("javascript:testAnotherFunction('Hello World Again!')");
   }
}

Ouvrir un exemple de numéroteur

Si la page Web contient un numéro de téléphone, vous pouvez passer un appel à l'aide du composeur de votre téléphone. Ce code vérifie l'URL qui commence par tel: alors faites une intention d'ouvrir le composeur et vous pouvez appeler le numéro de téléphone cliqué:

public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith("tel:")) { 
            Intent intent = new Intent(Intent.ACTION_DIAL,
                    Uri.parse(url)); 
            startActivity(intent); 
    }else if(url.startsWith("http:") || url.startsWith("https:")) {
        view.loadUrl(url);
    }
    return true;
}

Dépannage de WebView en imprimant des messages de console ou par le débogage à distance

Impression des messages de la console Webview dans logcat

Pour gérer console messages de console à partir de la page Web, vous pouvez remplacer onConsoleMessage dans WebChromeClient :

final class ChromeClient extends WebChromeClient {
    @Override
    public boolean onConsoleMessage(ConsoleMessage msg) {
        Log.d(
            "WebView", 
            String.format("%s %s:%d", msg.message(), msg.lineNumber(), msg.sourceId())
        );
        return true;
    }
}

Et définissez-le dans votre activité ou fragment:

webView.setWebChromeClient(new ChromeClient());

Donc, cet exemple de page:

<html>
<head>
    <script type="text/javascript">
        console.log('test message');
    </script>
</head>
<body>
</body>
</html>

écrira log 'test message' à logcat:

WebView: exemple de message de test.html: 4

console.info() , console.warn() et console.error() sont également supportés par chrome-client.

Débogage à distance des appareils Android avec Chrome

Vous pouvez déboguer une application basée sur Webview à partir de Google Chrome.

Activer le débogage USB sur votre appareil Android

Sur votre appareil Android, ouvrez Paramètres, recherchez la section Options de développeur et activez le débogage USB.

Connectez et découvrez votre appareil Android

Ouvrir la page en chrome Page suivante: chrome: // inspect / # devices

Dans la boîte de dialogue Inspecter les périphériques, sélectionnez votre appareil et appuyez sur inspecter . Une nouvelle instance de Chrome DevTools s'ouvre sur votre machine de développement.

Des instructions et une description plus détaillées de DevTools sont disponibles sur developers.google.com.

Ouvrir un fichier local / Créer un contenu dynamique dans Webview

Layout.xml

                <WebView
                android:id="@+id/WebViewToDisplay"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:fadeScrollbars="false" />

Charger des données dans WebViewToDisplay

        WebView webViewDisplay;
        StringBuffer LoadWEb1;

        webViewDisplay = (WebView) findViewById(R.id.WebViewToDisplay);
        LoadWEb1 = new StringBuffer();
        LoadWEb1.append("<html><body><h1>My First Heading</h1><p>My first paragraph.</p>");
        //Sample code to read parameters at run time
        String strName = "Test Paragraph";
        LoadWEb1.append("<br/><p>"+strName+"</p>");
        String result = LoadWEb1.append("</body></html>").toString();
                WebSettings webSettings = webViewDisplay.getSettings();
                webSettings.setJavaScriptEnabled(true);
                webViewDisplay.getSettings().setBuiltInZoomControls(true);
                if (android.os.Build.VERSION.SDK_INT >= 11){
                    webViewDisplay.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
                    webViewDisplay.getSettings().setDisplayZoomControls(false);
                }

                webViewDisplay.loadDataWithBaseURL(null, result, "text/html", "utf-8",
                        null);
                //To load local file directly from assets folder use below code
                //webViewDisplay.loadUrl("file:///android_asset/aboutapp.html");