Cómo ejecutar una función JavaScript desde Android
En el post anterior vimos Cómo ejecutar código HTML5 en un WebView en Android. En este post
veremos cómo ejecutar una función JavaScript desde Android.
Es válido recordar
que este ejemplo es basado en un tutorial del colega Carlos García( http://www.carlos-garcia.es/tutorial/android-mixed-native-web ).
Lo primero es que el código HTML que está cargado en nuestro
WebView y que tenga implementada la función que queremos ejecutar. Para el
ejemplo vamos a usar el siguiente código de HTML y JS perteneciente al archivo
test.html disponible en github( 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>
Luego para ejecutar la función JS desde Android ponemos el
siguiente código. En mi caso está implementado en la función onClick(View view)
para ejecutarlo cuando se de click en el botón de la aplicación. Tomen en
cuenta poner el if porque el comando puede variar en dependencia de la versión
del SDK de Android y como buena práctica recomiendo guardar la llamada en JS en
una variable en caso de tener que cambiar la función o los parámetros solo lo
tendremos que cambiar una vez.
@Override
public void onClick(View view) {
String jsCall = ("javascript:callFromAndroidToJS('" + txt1.getText().toString() + "')");
if (android.os.Build.VERSION.SDK_INT < 19) {
browser.loadUrl(jsCall);
} else {
browser.evaluateJavascript(jsCall,null);
}
}
public void onClick(View view) {
String jsCall = ("javascript:callFromAndroidToJS('" + txt1.getText().toString() + "')");
if (android.os.Build.VERSION.SDK_INT < 19) {
browser.loadUrl(jsCall);
} else {
browser.evaluateJavascript(jsCall,null);
}
}
Luego de esto podemos ejecutar y construir nuestra propia
aplicación HTML usando JS desde Android. Aún nos queda un tercer post en el que
veremos Cómo ejecutar una función en Android desde JavaScript. Recuerde que el
código fuente empleado en estos ejemplos está disponible en GitHub.
Saludos.
Comentarios
Publicar un comentario