Buscar..


Introducción

WebView es una vista que muestra páginas web dentro de su aplicación. Por esto puedes agregar tu propia URL.

Observaciones

Por favor, no olvide agregar permiso en su archivo de manifiesto de Android

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

Los diálogos de alerta de JavaScript en WebView - Cómo hacer que funcionen

De forma predeterminada, WebView no implementa diálogos de alerta de JavaScript, es decir. alert() no hará nada. Para que sea necesario, primero debe habilitar JavaScript (obviamente ...), y luego configurar un WebChromeClient para manejar las solicitudes de diálogos de alerta desde la página:

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

Aquí, onJsAlert , y luego llamamos a la súper implementación, que nos da un diálogo estándar de Android. También puede usar el mensaje y la URL usted mismo, por ejemplo, si desea crear un diálogo de estilo personalizado o si desea iniciar sesión.

Comunicación de Javascript a Java (Android)

Actividad de 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
    }
}

Página web, llamada Javascript

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

Consejo Extra

Al pasar en una estructura de datos compleja, una posible solución es usar JSON.

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

En el lado de Android use su analizador JSON favorito, es decir: JSONObject

Comunicación de Java a Javascript

Ejemplo básico

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

Ejemplo de marcador abierto

Si la página web a contiene un número de teléfono, puede hacer una llamada utilizando el marcador de su teléfono. Este código comprueba la url que comienza con tel: luego intente abrir el marcador y puede hacer una llamada al número de teléfono seleccionado:

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

Solución de problemas de WebView mediante la impresión de los mensajes de la consola o la depuración remota

Imprimiendo mensajes de consola webview a logcat

Para manejar los mensajes de la console desde la página web, puede anular onConsoleMessage en 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;
    }
}

Y ponlo en tu actividad o fragmento:

webView.setWebChromeClient(new ChromeClient());

Así que esta página de muestra:

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

escribirá el registro 'mensaje de prueba' a logcat:

WebView: muestra de mensaje de prueba.html: 4

console.info() , console.warn() y console.error() también son compatibles con chrome-client.

Depuración remota de dispositivos Android con Chrome

Tu puedes depurar de forma remota la aplicación basada en webview desde tu escritorio Chrome.

Habilitar la depuración USB en su dispositivo Android

En su dispositivo Android, abra Configuración, busque la sección de Opciones para desarrolladores y habilite la depuración USB.

Conecta y descubre tu dispositivo Android

Abra la página en chrome página siguiente: chrome: // inspect / / devices

En el cuadro de diálogo Inspeccionar dispositivos, seleccione su dispositivo y presione inspeccionar . Una nueva instancia de DevTools de Chrome se abre en su máquina de desarrollo.

Puede encontrar una guía y descripción más detallada de DevTools en developers.google.com

Abrir archivo local / Crear contenido dinámico en 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" />

Cargar datos en 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");


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow