Cómo ejecutar una función en Android desde JavaScript
Luego de haber visto los 2 post(https://memoriasdev.blogspot.com/2018/06/como-ejecutar-codigo-html5-en-android.html,
https://memoriasdev.blogspot.com/2018/10/como-ejecutar-una-funcion-javascript.html.
Veremos cómo ejecutar funciones en Android desde JavaScript. Recordemos que
este ejemplo es basado en un tutorial del colega Carlos García.
Para este ejemplo usaremos el mismo código HTML que en el
post anterior. Este código HTML deberá estar cargado en nuestro WebView. El
ejemplo siguiente disponible en https://github.com/josernesto1989/AndroidWebDemo.
<html>
<head>
<title>Android WebView y NativeApp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript">
function callFromAndroidToJS(texto) {
document.getElementById("target").innerHTML=texto;
}
function callFromJSToAndroid() {
jsNativeInterface.metodoDemo1();
}
function callFromJSToAndroidForReadJson() {
var datosJson = eval('(' + jsNativeInterface.metodoDemo2() + ')');
document.getElementById("target").innerHTML=datosJson.timestamp;
}
</script>
<style type="text/css">
a { color: green; text-decoration: underline;}
</style>
</head>
<body>
<ul>
<li><p>Prueba 1: <a onclick="callFromJSToAndroid();">Haga clic aquí</a> para invocar desde el JavaScript a la aplicación Android</p></li>
<li><p>Prueba 2: <a onclick="callFromJSToAndroidForReadJson();">Haga clic aquí</a> para invocar desde el JavaScript a la aplicación Android y leer JSON</p></li>
<li><p>Prueba 3: <span id="target">Este texto será sustituido desde la aplicación nativa</span></p></li>
</ul>
</body>
</html>
<head>
<title>Android WebView y NativeApp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript">
function callFromAndroidToJS(texto) {
document.getElementById("target").innerHTML=texto;
}
function callFromJSToAndroid() {
jsNativeInterface.metodoDemo1();
}
function callFromJSToAndroidForReadJson() {
var datosJson = eval('(' + jsNativeInterface.metodoDemo2() + ')');
document.getElementById("target").innerHTML=datosJson.timestamp;
}
</script>
<style type="text/css">
a { color: green; text-decoration: underline;}
</style>
</head>
<body>
<ul>
<li><p>Prueba 1: <a onclick="callFromJSToAndroid();">Haga clic aquí</a> para invocar desde el JavaScript a la aplicación Android</p></li>
<li><p>Prueba 2: <a onclick="callFromJSToAndroidForReadJson();">Haga clic aquí</a> para invocar desde el JavaScript a la aplicación Android y leer JSON</p></li>
<li><p>Prueba 3: <span id="target">Este texto será sustituido desde la aplicación nativa</span></p></li>
</ul>
</body>
</html>
Para que funcione correctamente tendremos que crear una
interfaz que nos permita declarar los métodos que serán ejecutados desde el
código HTML.
package com.vipcell.krreno.mywebsample;
public interface MyAndroidToJsInterface {
public void metodoDemo1();
public String metodoDemo2();
}
public interface MyAndroidToJsInterface {
public void metodoDemo1();
public String metodoDemo2();
}
luego adicionamos a nuestra clase principal
implements MyAndroidToJsInterface
y los implementamos
@Override @JavascriptInterface public void metodoDemo1() { Toast.makeText(this, "Invocado el metodo: metodoDemo1", Toast.LENGTH_SHORT).show(); } @Override @JavascriptInterface public String metodoDemo2() { String toReturn = null; try { JSONObject json = new JSONObject(); json.put("timestamp", System.currentTimeMillis()); json.put("autor", "http://www.carlos-garcia.es"); toReturn = json.toString(); } catch (JSONException e) { // no se dará } return toReturn; }
Para que todo funcione correctamente solo nos queda
adicionar las siguientes líneas. Recuerden que browser sería nuestro WebView
browser.getSettings().setJavaScriptEnabled(true); browser.addJavascriptInterface(this, "jsNativeInterface");
Saludos y espero que esta serie de artículos le sean útiles
y les haga ahorrar tiempo.
Comentarios
Publicar un comentario