Ocultando la barra de direcciones del navegador de Android

Introducción

Con los beneficios que las nuevas características de HTML5 y CSS3 traen a los desarrolladores de aplicaciones móviles cada día es mas frecuente que se desarrollen sitios y aplicaciones web diseñadas específicamente para estos dispositivos.

Las aplicaciones web móviles son en esencia una página web que emula en cierta medida el look-and-feel de las aplicaciones nativas para permitirle al usuario acceder a la funcionalidad de la aplicación con los beneficios (y desventajas) de una aplicación web pero con una experiencia similar a las aplicaciones convencionales.  Para hacer esto existen varios frameworks sin embargo hay ocasiones en las que es preferible no basarse en ellos sino implementar una página web estándar.

Ocultando la barra de direcciones en el navegador web de Android
Ocultando la barra de direcciones en el navegador web de Android

En esos casos probablemente la primera de las adaptaciones que se desea realizar es el ocultar la barra de direcciones del navegador ya que así se dará la impresión de aplicación nativa y no de página web convencional inmersa en un navegador.

En Android esto es posible lograr de cierta manera.  La barra de direcciones no puede ser eliminada por completo pero puede ser ocultada, es decir, no se verá durante la ejecución de la aplicación web móvil hasta que el usuario decida hacer el scroll necesario para acceder a ella.

Procedimiento

El procedimiento para lograr esto se basa en dos pasos que se deben realizar mediante Javascript.  El primero de ellos consiste en garantizar el la página web de la aplicación móvil cuenta con suficiente altura para poderse realizar.  Para esto se manipula el alto del body.  El segundo paso consiste en simular desde código un scroll lo que activará la característica del navegador de ocultar la barra de direcciones.

/**
 * Hide the URL address bar on standard Android's browser by setting enough
 * document height and auto scrolling to active the bar hiding feature
 */

function hideAddressBar()
{
  if(!window.location.hash)
  {
      if(document.height < window.outerHeight + 10)
      {
          document.body.style.height = (window.outerHeight + 50) + 'px';
      }

      setTimeout(function()
      {
      	window.scrollTo(0, 1);
      }, 50);
  }
}

Finalmente se invoca esta función una vez se ha cargado completamente (load) la página web, garantizando también que esto se haga durante los cambios de orientación del dispositivo.

/**
 * Start up procedure to hide the Android's URL bar
 */

window.addEventListener("load", function()
{

	if(!window.pageYOffset)
	{
		hideAddressBar();
	}

	window.addEventListener("orientationchange", hideAddressBar);

});

Enlaces

One thought on “Ocultando la barra de direcciones del navegador de Android”

  1. Hola amigo,
    Tengo una pequeña web con jquery mobile y me gustaria esconder la barra de la url.
    He visto cosas en tu pagina pero no consigo que me funcionen… (tengo unos conocimientos bastante limitados 🙂 )
    Y tambien me gustaria evitar que se pueda girar… al mover el telèfono.

    me podrias hechar una mano?

    saludos

Leave a Reply

Your email address will not be published. Required fields are marked *