javascript - establecer - ¿Cómo abrir los enlaces de mailto en la nueva pestaña para los usuarios que tienen gmail como el controlador de correo predeterminado?
gmail correo electrónico (3)
En una página web, los enlaces de mailto abren el cliente predeterminado de correo electrónico. Ahora que Chrome ofrece la posibilidad de configurar Gmail como el cliente de correo electrónico predeterminado, algunos usuarios tienen los enlaces abiertos en la misma ventana y los alejan de la página en la que hicieron clic en el enlace (que no les gusta).
He intentado agregar target _blank a los enlaces, lo que funciona muy bien para los usuarios de gmail, pero enloquecerán a los usuarios de Outlook, ya que se abrirá una nueva pestaña en blanco cada vez que hagan clic en un enlace de mailto.
¿Hay alguna forma de detectar el controlador de correo electrónico predeterminado y ofrecer una buena experiencia para ambos tipos de usuarios?
De acuerdo, así pude hacer que esto funcionara en Chrome para Mac. Su experiencia puede ser diferente. Además, esta es una IMO bastante hacky, por lo que puede que no valga la pena. Honestamente, esto debería existir como una configuración dentro de Chrome, y el comportamiento debe delegarse en el sitio web. Por ejemplo, Chrome debería tener una opción: "[x] Siempre abrir enlaces de correo en pestaña separada"
Dicho esto, así es como lo haces.
Primero construye tus enlaces así:
<a href="#" data-mailto="[email protected]">Mail Somebody</a>
A continuación, establezca un controlador de clic para ellos.
$(''a[data-mailto]'').click(function(){
var link = ''mailto.html#mailto:'' + $(this).data(''mailto'');
window.open(link, ''Mailer'');
return false;
});
Existe un argumento de options opcionales para window.open que puede modificar. De hecho, casi lo recomendaría, para ver si puede lograr que la ventana generada sea lo más inadmisible posible. https://developer.mozilla.org/en/DOM/window.open
http://www.w3schools.com/jsref/met_win_open.asp (el documento de MDN es exhaustivo, mientras que el documento de w3schools es casi más fácil de leer)
A continuación, tenemos que crear la página mailto.html. Ahora es posible que necesite jugar con el tiempo de espera que ve a continuación. Probablemente incluso podría establecer esto a algo realmente corto como 500 ms.
<html>
<script>
function checkMailto(hash){
hash = hash.split(''mailto:'');
if(hash.length > 1){
return hash[1];
} else {
return false;
}
}
var mailto = checkMailto(location.hash);
if(mailto){
location.href = ''mailto:''+mailto;
setTimeout(function(){
window.close();
}, 1000);
}
</script>
</html>
Resultados
Mail.app establecido como mi lector de correo electrónico predeterminado:
Cuando hago clic en el enlace, abre una ventana por una fracción de segundo y luego compone un mensaje en blanco. En el navegador vuelve a la página original.
Gmail configurado como lector de correo en Configuración> Avanzado> Privacidad> Controladores:
Cuando hago clic en el enlace, se abre una nueva pestaña en Gmail, con la página anterior de forma segura en su propia pestaña.
Nota: una vez que configura Gmail como su controlador de correo electrónico, en el lado del sistema operativo (al menos en Mac), Chrome se configura como el controlador de correo electrónico del sistema. Por lo tanto, incluso si desactivas Gmail como el controlador de correo electrónico dentro de Chrome, aún está configurado en el nivel del sistema operativo. Entonces para restablecer eso, fui a Mail> Prefs> General. Y configure el lector de correo predeterminado de nuevo en Correo.
Recibí una solicitud para implementar esto en ownCloud Contacts y, aunque también creo que es un poco hackish, no parece haber otra forma de detectar si el controlador de mailto está configurado en una dirección webmail.
Este ejemplo se implementa sin necesidad de archivos externos.
NOTA: se necesita jQuery para este ejemplo, pero probablemente se pueda volver a escribir en JavaScript estricto.
Para evitar tener que usar data-mailto u otros trucos, puede interceptar el controlador:
$(window).on(''click'', function(event) {
if(!$(event.target).is(''a[href^="mailto"]'')) {
return;
}
// I strip the ''mailto'' because I use the same function in other places
mailTo($(event.target).attr(''href'').substr(7));
// Both are needed to avoid triggering other event handlers
event.stopPropagation();
event.preventDefault();
});
Ahora para la función mailTo() :
var mailTo = function(url) {
var url = ''mailto:'' + data.url;
// I have often experienced Firefox errors with protocol handlers
// so better be on the safe side.
try {
var mailer = window.open(url, ''Mailer'');
} catch(e) {
console.log(''There was an error opening a mail composer.'', e);
}
setTimeout(function() {
// This needs to be in a try/catch block because a Security
// error is thrown if the protocols doesn''t match
try {
// At least in Firefox the locationis changed to about:blank
if(mailer.location.href === url
|| mailer.location.href.substr(0, 6) === ''about:''
) {
mailer.close();
}
} catch(e) {
console.log(''There was an error opening a mail composer.'', e);
}
}, 500);
}
Reduje el tiempo de espera a 500. Works For Me, veamos qué dicen los usuarios cuando se lo envía;)
Si desea evitar abrir una nueva pestaña / ventana, puede usar un iframe. Se requerirá una solicitud adicional, pero es menos molesto si no usa webmail usted mismo. Esto no fue factible para ownCloud porque de manera predeterminada, la Política de seguridad del contenido es muy estricta, y no se permite inyectar URL "extranjeras" en un iframe (no se ha probado mucho):
var mailTo = function(url) {
var url = ''mailto:'' + data.url, $if;
try {
$if = $(''<iframe />'')
.css({width: 0, height: 0, display: ''none''})
.appendTo($(''body''))
.attr(''src'', url);
} catch(e) {
console.log(''There was an error opening a mail composer.'', e);
}
setTimeout(function() {
try {
if($if.attr(''src'') !== url
&& $if.attr(''src'').substr(0, 6) !== ''about:''
) {
window.open($if.attr(''src''), ''Mailer'');
}
} catch(e) {
console.log(''There was an error opening a mail composer.'', e);
}
$if.remove();
}, 500);
}
Solo quería decir que para Firefox hay una solución simple.
Construya sus enlaces de esta manera:
<a href="#" data-mailto="[email protected]">Mail Somebody</a>
Establezca un controlador de clic para esos.
$(''a[data-mailto]'').click(function(){
window.open($(this).data(''mailto''));
});
Sería genial si Chrome lo aceptara también.