Подтвердить что ты не робот

Как открыть ссылки mailto на новой вкладке для пользователей, у которых gmail используется почтовым обработчиком по умолчанию?

На веб-странице mailto ссылки открывают почтовый клиент по умолчанию. Теперь, когда Chrome предлагает возможность установить Gmail в качестве почтового клиента по умолчанию, некоторые пользователи открывают ссылки в одном окне, тем самым снимая их с страницы, на которую они нажали ссылку (что им не нравится)

Я попытался добавить целевой _blank к ссылкам, который отлично подходит для пользователей gmail, но приведет пользователей Outlook к безумным, потому что новая пустая вкладка будет открываться каждый раз, когда они нажимают на ссылку mailto.

Есть ли способ обнаружить обработчик электронной почты по умолчанию и предложить хороший опыт для обоих типов пользователей?

4b9b3361

ОТВЕТЫ

Ответ 1

Хорошо, поэтому мне удалось заставить это работать в Chrome на Mac. Ваш пробег может отличаться. Кроме того, это довольно хакерская ИМО, поэтому она может не стоить того. Честно говоря, это должно существовать как параметр в Chrome, и поведение должно быть делегировано на веб-сайт. Например. Chrome должен иметь опцию: "[x] Всегда открывать ссылки mailto на отдельной вкладке"

Вот как вы это делаете.

Сначала создайте свои ссылки следующим образом:

<a href="#" data-mailto="[email protected]">Mail Somebody</a>

Затем установите для них обработчик кликов.

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

Существует необязательный аргумент options для window.open, который вы можете настроить. На самом деле я бы почти рекомендовал его, чтобы убедиться, что вы можете сделать созданное окно максимально незаметным. https://developer.mozilla.org/en/DOM/window.open

http://www.w3schools.com/jsref/met_win_open.asp (документ MDN является исчерпывающим, а документ w3schools почти легче читать)

Далее нам нужно создать страницу mailto.html. Теперь вам может понадобиться играть с таймаутом, который вы видите ниже. Возможно, вы могли бы даже установить это на что-то действительно короткое, например, 500 мс.

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

Результаты

Mail.app установлен как почтовый читатель по умолчанию:

Когда я нажимаю ссылку, она открывает окно на долю секунды, а затем формирует пустое сообщение. В браузере он возвращается к исходной странице.

Gmail установлен в качестве почтового устройства в разделе "Настройки" > "Дополнительно" > "Конфиденциальность" > "Обработчики":

Когда я нажимаю на ссылку, она открывает новую вкладку в Gmail, с предыдущей страницей на собственной вкладке.

Примечание. После установки Gmail в качестве обработчика электронной почты на стороне ОС (по крайней мере, на Mac) Chrome устанавливается как обработчик электронной почты системы. Поэтому, даже если вы отключите Gmail как обработчик электронной почты внутри Chrome, он по-прежнему устанавливается на уровне ОС. Итак, чтобы reset, я пошел в Mail > Prefs > General. И установите почтовый читатель по умолчанию в Mail.

Ответ 2

Я получил запрос для его реализации в контактах ownCloud, и хотя я также считаю, что это немного хакерский, похоже, нет другого способ обнаружения, если почтовый обработчик установлен на адрес электронной почты.

Этот пример реализован без необходимости использования внешних файлов.

ПРИМЕЧАНИЕ: jQuery необходим для этого примера, но его можно, вероятно, переписать на строгий javascript.

Чтобы избежать использования data-mailto или других трюков, вы можете вместо этого перехватить обработчик:

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

Теперь для функции 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);

}

Я уменьшил тайм-аут до 500. Works For Me позволяет увидеть, что говорят пользователи, когда он нажал;)

Если вы не хотите открывать новую вкладку/окно, вы можете использовать iframe. Для этого потребуется дополнительный запрос, но он менее раздражает, если вы не используете веб-почту самостоятельно. Это было невозможно для ownCloud, потому что по умолчанию политика Content-Security очень строгая, и ввод "чужих" URL-адресов в iframe не допускается (не тестируется много):

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

}

Ответ 3

Я просто хотел сказать, что для Firefox есть простое решение.

Создайте свои ссылки следующим образом:

<a href="#" data-mailto="[email protected]">Mail Somebody</a>

Установите для них обработчик кликов.

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

Было бы здорово, если бы Chrome принял его также.