Pregunta ¿Cómo abrir los enlaces de mailto en la nueva pestaña para los usuarios que tienen gmail como el controlador de correo predeterminado?


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?


32
2017-07-20 09:06


origen


Respuestas:


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. P.ej. 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="somebody@email.com">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;
});

Hay un opcional options argumento para window.open que puedes 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.


15
2017-07-21 19:34



recibi un 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 para una dirección de 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-mailtou otros trucos, puedes 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 el mailTo()función:

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 lo hagas use 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);

}

1
2018-03-11 14:41



Solo quería decir que para Firefox hay una solución simple.

Construya sus enlaces de esta manera:

<a href="#" data-mailto="somebody@email.com">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.


-3
2017-10-25 14:02