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.
Por Neuronic el 12 de Marzo de 2013
Por Lucas Moyano el 20 de Marzo de 2013
Quisiera mencionar algunas mejoras para el código:
Se recomienda usar .prop y no .attr en jQuery:
.attr() versus .prop()
Sin embargo para el ejemplo no era necesario usar .attr o .prop:
Código :
;(function($) { $('a').on('click', link_clickHandler); function link_clickHandler(event){ if (!this.target) { alert('internal link'); event.preventDefault(); window.location = this.href; } else { alert('external link'); } } })(jQuery);Ahora veamos como es sin depender de jQuery. Recuerden que el archivo de jQuery tiene mucho más código así que esto resulta ser más óptimo.Código :
// Sin jQuery ;(function(){ // Equivalencia de " $('a').on " var links = document.querySelectorAll('a'); // "querySelectorAll" no es soportado en IE7 a menos var i, total = links.length; for(i=0; i<total; ++i){ links[i].addEventListener('click', link_clickHandler); } //-- function link_clickHandler(event){ if (!this.target) { alert('internal link'); event.preventDefault(); window.location = this.href; } else { alert('external link'); } } })();Por Neuronic el 25 de Marzo de 2013