34

在网页上的 mailto 链接打开默认的电子邮件客户端。现在 Chrome 提供了将 Gmail 设置为默认电子邮件客户端的功能，一些用户在同一窗口中打开了链接，从而使他们离开了他们单击链接的页面（他们不喜欢）

我尝试将 target _blank 添加到链接中，这对 gmail 用户非常有用，但会使 Outlook 用户发疯，因为每次单击 mailto 链接时都会打开一个新的空白选项卡。

我有办法检测默认电子邮件处理程序并为这两种类型的用户提供良好的体验吗？

4

3 回答 3

17

好的，所以我能够在 Mac 上的 Chrome 中使用它。你的旅费可能会改变。此外，这对 IMO 来说是很老套的，所以它可能不值得。老实说，这应该作为 Chrome 中的设置存在，并且应该将行为委托给网站。例如 Chrome 应该有一个选项：“[x] 始终在单独的选项卡中打开 mailto 链接”

话虽如此，这就是你的做法。

首先像这样构建您的链接：

<a href="#" data-mailto="somebody@email.com">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 将设置为系统的电子邮件处理程序。因此，即使您在 Chrome 中关闭 Gmail 作为电子邮件处理程序，它仍然是在操作系统级别设置的。所以要重置它，我去了邮件>首选项>常规。并将默认邮件阅读器设置回邮件。

于 2012-07-21T19:34:51.003 回答
2

我收到了在 ownCloud Contacts 中实现此功能的请求，虽然我也认为这有点骇人听闻，但似乎没有另一种方法可以检测 mailto 处理程序是否设置为 webmail 地址。

这个例子是在不需要外部文件的情况下实现的。

注意：此示例需要 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。为我工作，让我们看看用户在推送时说了什么；）

如果您想避免打开新选项卡/窗口，可以使用 iframe。这将需要额外的请求，但如果您自己不使用网络邮件，则不会那么烦人。这对 ownCloud 来说是不可行的，因为默认情况下 Content-Security-Policy 非常严格，并且不允许将“外来”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);

}
于 2014-03-11T14:41:18.173 回答
-3

我只是想说，对于 Firefox，有一个简单的解决方案。

像这样构建您的链接：

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

为这些设置一个点击处理程序。

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

如果 Chrome 也接受它，那就太好了。

于 2013-10-25T14:02:14.993 回答