Android
WebView
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");