Pertanyaan Bagaimana cara membuka tautan mailto di tab baru untuk pengguna yang memiliki Gmail sebagai penangan pos default?


Pada halaman web, mailto link membuka klien e-mail default. Sekarang Chrome menawarkan kemampuan untuk mengatur Gmail sebagai klien email default, beberapa pengguna membuka tautan di jendela yang sama sehingga membawa mereka keluar dari halaman yang mereka klik tautan (yang tidak mereka sukai)

Saya telah mencoba menambahkan target _blank ke tautan, yang berfungsi baik untuk pengguna gmail, tetapi akan membuat pengguna Outlook marah, karena tab kosong baru akan terbuka setiap kali mereka mengeklik tautan mailto.

Saya ada cara untuk mendeteksi handler e-mail default dan menawarkan pengalaman yang baik untuk kedua jenis pengguna?


32
2017-07-20 09:06


asal


Jawaban:


Oke, jadi saya bisa mendapatkan ini bekerja di Chrome di Mac. Jarak tempuh Anda mungkin bervariasi. Juga, ini IMO yang cukup hacking, jadi mungkin tidak sepadan. Jujur ini harus ada sebagai pengaturan dalam Chrome, dan perilaku harus didelegasikan ke situs web. Misalnya. Chrome harus memiliki opsi: "[x] Selalu buka tautan mailto di tab terpisah"

Itu dikatakan, begini cara Anda melakukannya.

Pertama, buat tautan Anda seperti ini:

<a href="#" data-mailto="somebody@email.com">Mail Somebody</a>

Kemudian atur handler klik untuk itu.

$('a[data-mailto]').click(function(){
  var link = 'mailto.html#mailto:' + $(this).data('mailto');
  window.open(link, 'Mailer');
  return false;
});

Ada pilihan options argumen untuk window.open yang dapat Anda sesuaikan. Bahkan saya hampir merekomendasikannya, untuk melihat apakah Anda bisa mendapatkan jendela yang dihasilkan menjadi tidak dapat dikenali mungkin. https://developer.mozilla.org/en/DOM/window.open

http://www.w3schools.com/jsref/met_win_open.asp (MDN doc lengkap, sedangkan dok w3schools hampir lebih mudah dibaca)

Selanjutnya kita perlu membuat halaman mailto.html. Sekarang Anda mungkin perlu bermain-main dengan batas waktu yang Anda lihat di bawah. Anda bahkan mungkin bisa mengatur ini menjadi sesuatu yang sangat pendek seperti 500ms.

<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>

Hasil

Mail.app ditetapkan sebagai pembaca email default saya:

Ketika saya mengklik tautan, itu membuka jendela selama sepersekian detik, lalu membuat pesan kosong. Di browser itu kembali ke halaman asli.

Gmail ditetapkan sebagai pembaca surat di bawah Pengaturan> Lanjutan> Privasi> Penangan:

Ketika saya mengklik tautan, itu akan membuka tab baru ke Gmail, dengan halaman sebelumnya aman di tab itu sendiri.

Catatan: Setelah Anda mengatur Gmail sebagai penangan email Anda, di sisi OS (setidaknya di mac), Chrome ditetapkan sebagai penangan email sistem. Jadi bahkan jika Anda mematikan Gmail sebagai penangan email di dalam Chrome, itu masih disetel pada tingkat OS. Jadi untuk mengatur ulang itu, saya pergi ke Mail> Prefs> General. Dan setel pembaca surat default kembali ke Mail.


15
2017-07-21 19:34



Saya menerima sebuah permintaan untuk menerapkan ini di Kontak ownCloud dan meskipun saya juga berpikir ini agak sedikit bersifat hack, sepertinya tidak ada cara lain untuk mendeteksi jika mailto handler diatur ke alamat webmail.

Contoh ini diimplementasikan tanpa membutuhkan file eksternal.

CATATAN: jQuery diperlukan untuk contoh ini, tetapi mungkin bisa ditulis ulang ke javascript yang ketat.

Untuk menghindari keharusan menggunakannya data-mailtoatau trik lainnya, Anda malah bisa mencegat pawang:

$(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();
});

Sekarang untuk mailTo()fungsi:

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);

}

Saya mengurangi batas waktu menjadi 500. Works For Me, mari kita lihat apa yang dikatakan pengguna ketika didorong;)

Jika Anda ingin menghindari membuka tab / jendela baru, Anda dapat menggunakan iframe. Ini akan membutuhkan permintaan tambahan, tetapi kurang menjengkelkan jika Anda tidak gunakan webmail sendiri. Ini tidak layak untuk ownCloud karena secara default Content-Security-Policy sangat ketat, dan menyuntikkan URL "asing" ke dalam iframe tidak diizinkan (tidak diuji banyak):

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



Saya hanya ingin mengatakan bahwa untuk Firefox ada solusi sederhana.

Bangun tautan Anda seperti ini:

<a href="#" data-mailto="somebody@email.com">Mail Somebody</a>

Atur penangan klik untuk itu.

$('a[data-mailto]').click(function(){
  window.open($(this).data('mailto'));
});

Akan lebih bagus lagi jika Chrome menerimanya juga.


-3
2017-10-25 14:02