web-dev-qa-db-ja.com

既定のメールハンドラーとしてGmailを使用しているユーザーの新しいタブでmailtoリンクを開く方法

Webページのmailtoリンクで、デフォルトの電子メールクライアントを開きます。 ChromeはGmailをデフォルトの電子メールクライアントとして設定する機能を提供するため、一部のユーザーはリンクを同じウィンドウで開いているため、リンクをクリックしたページ（好きではない）

ターゲット_blankをリンクに追加しようとしましたが、これはgmailユーザーには最適ですが、mailtoリンクをクリックするたびに新しい空白のタブが開くため、Outlookユーザーを怒らせます。

デフォルトの電子メールハンドラを検出し、両方のタイプのユーザーに優れたエクスペリエンスを提供する方法はありますか？

javascriptgoogle-chromegmailhandlermailto
33
Martin Henk

わかりましたので、これをMacでChromeで動作させることができました。あなたの走行距離は異なる場合があります。 Chrome内の設定、および動作はWebサイトに委任する必要があります。たとえば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;
});

微調整できるwindow.openへのオプションのoptions引数があります。実際、生成されたウィンドウをできるだけ目立たなくすることができるかどうかを確認するために、ほぼお勧めします。 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をメールハンドラーとして設定すると、OS側（少なくともMac）では、Chromeがシステムのメールハンドラーとして設定されます。GmailをメールとしてオフにしてもChrome内のハンドラーは、OSレベルで設定されたままなので、それをリセットするために、Mail> Prefs> Generalに移動し、デフォルトのメールリーダーをMailに戻します。

16
Jon Jaques

ownCloudの連絡先でこれを実装するためのリクエスト を受け取りましたが、少しハックしているとも思いますが、mailtoハンドラがウェブメールアドレスに設定されているかどうかを検出する別の方法はないようです。

この例は、外部ファイルを必要とせずに実装されています。

注：この例では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に減らしました。WorksFor Meでは、プッシュされたときにユーザーが何を言っているかを見てみましょう;）

新しいタブ/ウィンドウを開かないようにする場合は、iframeを使用できます。追加の要求が必要になりますが、Webメールを自分で使用しない場合は面倒ではありません。デフォルトでは、Content-Security-Policyは非常に厳密であり、iframeに「外部」URLを挿入することは許可されていないため（これはあまりテストされていません）、ownCloudではこれは実行できませんでした。

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

}
_
2
tanghus