Comunidad de diseño web y desarrollo en internet

Prevenir que los enlaces de una Web App en iOS se abran en Safari

Este sencillo tutorial de jQuery sirve para prevenir que los enlaces de una webapp corriendo en pantalla completa "standalone" se abran en Safari, ya que al pulsar un enlace abre por defecto y se pierde el foco de la webapp fullscreen.

En Android eso no pasa ya que no permite correr webapps a fullscren, excepto si tienes el firefox instalado y la Web App instalada con mozilla-install.

El código es muy simple, solo debemos capturar los clicks de los enlaces:

Código :

jQuery(function($) {
  $('a').on('click', function(event) {
    var href = $(this).attr("href");
    var target = $(this).attr("target");
    if (typeof target === "undefined") {
      alert('internal link');
      event.preventDefault();
      window.location = href;
    } else alert('external link');
  });
});


Con .on capturamos los clics, también si creamos enlaces dinámicamente. Dentro del evento click, se comprueba si el enlace tiene el atributo target, si no lo tiene lo que hace es prevenir la opción por defecto y se fuerza la carga del enlace mediante Javascript, con eso prevenimos que IOS abra el navegador con el enlace y use la vista webkit actual.

Si ponemos target con valor blank podemos forzar la apertura del enlace al navegador.

Su uso es muy simple:

Código :

<a href="enlace_interno">Enlace interno</a>
<a href="enlace_externo" target="_blank">Enlace externo</a>


Espero que os haya gustado.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate