Android
WebView

introduzione

Osservazioni

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

Dialoghi di avvisi JavaScript in WebView - Come farli funzionare

Per impostazione predefinita, WebView non implementa finestre di dialogo di avviso JavaScript, ad es. alert() non farà nulla. Per rendere necessario innanzitutto abilitare JavaScript (ovviamente ..), e quindi impostare un WebChromeClient per gestire le richieste di finestre di avviso dalla pagina:

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);
    }
});

Qui, eseguiamo l'override su onJsAlert , quindi eseguiamo la chiamata alla super implementazione, che ci fornisce una finestra di dialogo standard di Android. Puoi anche utilizzare tu stesso il messaggio e l'URL, ad esempio se desideri creare una finestra di dialogo personalizzata o se desideri registrarli.

Comunicazione da Javascript a Java (Android)

Attività 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
    }
}

Pagina Web, chiamata Javascript

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

Suggerimento extra

Passando in una struttura dati complessa, una possibile soluzione è usare JSON.

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

Sul lato Android usa il tuo parser JSON preferito, ovvero: JSONObject

Comunicazione da Java a Javascript

Esempio di 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!')");
   }
}

Esempio di dialer aperto

Se la pagina Web a contiene un numero di telefono, è possibile effettuare una chiamata utilizzando il dialer del telefono. Questo codice controlla l'url che inizia con tel: quindi fai l'intento di aprire il dialer e puoi effettuare una chiamata al numero di telefono cliccato:

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;
}

Risoluzione dei problemi di WebView stampando i messaggi della console o tramite debug remoto

Stampa dei messaggi della console webview su logcat

Per gestire i messaggi della console dalla pagina Web, è possibile eseguire l'override di onConsoleMessage in 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;
    }
}

E impostalo nella tua attività o frammento:

webView.setWebChromeClient(new ChromeClient());

Quindi questa pagina di esempio:

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

scriverà il log 'test message' su logcat:

WebView: messaggio di prova sample.html: 4

console.info() , console.warn() e console.error() sono supportati anche da chrome-client.

Debugging remoto di dispositivi Android con Chrome

Puoi eseguire il debug remoto dell'applicazione basata su Web dal tuo desktop Chrome.

Abilita il debug USB sul tuo dispositivo Android

Sul tuo dispositivo Android, apri Impostazioni, trova la sezione Opzioni sviluppatore e abilita il debug USB.

Connetti e scopri il tuo dispositivo Android

Aprire la pagina in chrome seguente pagina: chrome: // inspect / # devices

Dalla finestra di dialogo Inspect Devices, seleziona il tuo dispositivo e premi inspect . Una nuova istanza di Chrome's DevTools si apre sul tuo computer di sviluppo.

Linee guida e descrizione più dettagliate di DevTools sono disponibili su developers.google.com

Apri file locale / Crea contenuto dinamico in 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" />

Carica i dati in 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");