在新标签页/窗口中打开href mailto链接

40

我有一张图片,当点击它时,我想链接到一个mailto地址:

 <a id="mailto" href="mailto:hfms@live.com.my" target="_newtab" >
        <img src="@Url.Content("~/Content/HomePage/email.png")" alt="email" /></a>

目前,一旦用户点击该链接,就会启动电子邮件选项来选择mailto应用程序,一旦我选择了应用程序,mailto链接就会在当前标签页中打开。这将导致用户离开该应用程序。

因此,我希望页面发送电子邮件(通过Gmail、Yahoo等)要么在新标签页中打开,要么在窗口中打开。有什么办法可以实现吗?我尝试了target="_newtab"和target="_blank",但都没有起作用。

非常感谢任何帮助... 谢谢...

(如果没有其他方法,jQuery方法也是可接受的,谢谢)


1
“我希望mailto链接可以在新标签页或窗口中打开” - 您希望在这个新标签页或窗口中出现什么内容?请尽可能具体。 - evan
发送电子邮件的页面,可以是Gmail、Yahoo等。 - shennyL
1
这是不可能的。抱歉。 - jamieb
现代浏览器中可以通过添加 target="_blank" rel="noopener noreferrer" 来实现此功能。有关详细信息,请参阅此CSS Tricks文章 - David Weldon
9个回答

49

这段信息已经过时了,现在应该可以通过浏览器链接进行操作,例如Gmail和其他网页邮件客户端。然而,问题在于如果不是在系统邮件客户端中打开邮件,你可能只希望它在一个新的标签页中打开,如果是网页邮件客户端则在新标签页中打开,否则Outlook用户会看到一个空白的标签页,这样会感到迷惑,尤其是对于它们来说是Outlook用户。


40
感谢您赞同“尤其是因为他们是Outlook用户”的这句话。 - Lonnie Best

40

你不需要Javascript/Jquery来完成这个任务。一个普通的链接即可实现(除了Firefox v30+由于一个bug导致无法实现,详情见下文)。

<a href="mailto:example@example.com" target="_blank">

从Firefox 30开始,由于bug的原因,在Firefox中不起作用。它会在同一个标签页中打开并替换历史记录,因此点击“返回”按钮将无法回到含有mailto链接的页面。


2
仅供参考,现在已经过去了8个月,这个漏洞仍然存在。 - Leonidas
4
2016年更新:这个缺陷仍未修复。原始报告是在2011年开启的,因此除非该缺陷得到大量投票(暗示,暗示),否则不太可能得到修复:https://bugzilla.mozilla.org/show_bug.cgi?id=646552 - Costa
4
2017年更新:这个漏洞仍未修复。如果没有大量的支持票,它很可能永远不会得到修复:https://bugzilla.mozilla.org/show_bug.cgi?id=646552 - Costa
2
2021年更新:这个10年前的Firefox bug仍未修复。在bug跟踪器中最近有一些讨论,也许还有希望。 - Costa
这个 bug 还没解决啊。谢谢分享 Bugzilla 的链接。我之前很困惑为什么即使加了 target blank,它也不会在新标签页打开。 - Noitidart
显示剩余3条评论

25

此答案基于这个答案 在新标签页 / 窗口中打开href mailto链接.

现在,新的浏览器支持 一些 web 邮件界面(如 Gmail、Yahoo Mail、AOL 等)。

因此,我们可以简单地打开一个新窗口(支持旧版本浏览器,新版浏览器将只会打开一个新标签页),并使用 preventDefault 和默认链接重定向添加回退(以防非 JavaScript 用户)。

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-cancelation

https://developer.mozilla.org/es/docs/DOM/event.preventDefault

https://developer.mozilla.org/en-US/docs/Web/API/Window.open

像这样:

<a onClick="javascript:window.open('mailto:mail@domain.com', 'mail');event.preventDefault()" href="mailto:mail@domain.com">发送电子邮件</a>

http://jsfiddle.net/cNUNP/

感谢 https://dev59.com/CWoy5IYBdhLWcg3wcNpO#9880404

翻译完毕,敬礼,马科斯。


只是提供信息,使用桌面邮件客户端:Firefox在我的桌面邮件客户端中打开新的电子邮件,但同时也会有一个新的空标签页;Safari在打开桌面客户端之前会弹出一个警告,确认后会在新标签页中打开新的电子邮件;基于Chromium的浏览器似乎在将电子邮件处理交给桌面客户端后关闭了新的空标签页。 - retrovertigo

16

mailto调用用户默认的电子邮件客户端,它不会在任何情况下打开窗口或标签页。如果您想使用窗口或标签页,则需要配置一个表单并允许该表单在您的窗口/标签页中打开。当然,您还需要配置表单以使用服务器上可用的任何方法发送邮件。


30
这可能在2011年是正确的,但现在不再正确了。你可以使用target="_blank"在新标签页中打开像Gmail这样的邮件客户端。不幸的是,这并不足够,因为它会为使用独立客户端的人启动一个空白标签页。 - Chris Hanson
1
如何在一个选项卡中打开Outlook(最流行的电子邮件客户端)?以前我们总是可以在窗口或选项卡中打开基于Web的电子邮件服务。但是基于Web的电子邮件服务并不是大多数电子邮件客户端的选择。 - Scott
3
这个回答已经过时了,一些邮件客户端比如Gmail或Inbox可以在标签页中打开。 - Matt MacLeod
@MattMacLeod 目前使用最广泛的电子邮件客户端是Outlook。正如所述,虽然您可以设置链接以打开新标签页或窗口...但这在今天的#1客户端中不起作用。此答案并非过时。 - Scott
1
@scott "mailto调用用户默认的电子邮件客户端。它不会在任何情况下打开窗口或选项卡。"这部分是否已经过时? - Matt MacLeod
1
@MattMacLeod 不是过时的。Mailto仍然只调用用户默认的电子邮件客户端。 - Scott

3
可以确认,在Firefox浏览器中,使用'_blank'打开emailto链接仍然无法正常工作。相反,可以使用一个onClick函数来执行以下操作:

window.open('mailto:'+email+'?subject='+subject);


3

我知道这是一个老问题,但是我发现这个线程有最好的答案。我修改了Marcos上面的答案,以便在客户端有外部邮件处理程序时也关闭创建的空白选项卡。

参考答案

JS(使用jQuery进行事件处理)

$(document).on('click', 'a[href^=mailto]', function(e) {
  var checkClose, checkLoaded, event, href, i, len, loadEvents, results, t, wndw;
  e.preventDefault();
  href = this.href;
  wndw = window.open(href, 'mail');
  checkClose = function() {
    console.log('checkClose');
    try {
      wndw.location.href;
      return wndw.close();
    } catch (error) {
      return console.log('webmail');
    }
  };
  t = setTimeout(checkClose, 5000);
  try {
    checkLoaded = function() {
      console.log('loaded');
      clearTimeout(t);
      return t = setTimeout(checkClose, 2000);
    };
    wndw.onload = checkLoaded;
    loadEvents = ["DomContentLoaded", "load", "beforeunload", "unload"];
    results = [];
    for (i = 0, len = loadEvents.length; i < len; i++) {
      event = loadEvents[i];
      results.push(wndw.addEventListener(event, checkLoaded));
    }
    return results;
  } catch (error) {
    return checkLoaded();
  }
});

jsfiddle


这个正在我工作中生产环境中使用,对于谷歌浏览器没有问题,我还没有检查其他浏览器。 - Sampson Crowley
确认最新的Firefox。我使用Linux,无法测试IE。 - Sampson Crowley
感谢@Sampson-Crowley!我可以确认在IE(11)和Chrome(68)中可以正常工作。如果正确设置了Chrome并使用帐户打开,则会作为Web客户端打开。如果设置为电子邮件客户端,它也可以正常工作。在某些情况下,我可能会得到一个空选项卡(无法重新创建),但是它会按预期从代码中自动关闭。还在Android中进行了测试,进入Gmail。感谢分享! - Henrik

1

变量1(JavaScript):

<script>
// Open mailto links in a new tab
function mailto(email, subject, body) {
    var url;
    url = 'mailto:' + email;
    url += '?subject=' + subject;
    url += '&body=' + body;
    window.open(url);
}
</script>

<a href="#" onclick="mailto('test@gmail.com', 'Subject', 'Body');event.preventDefault()">test@gmail.com</a>

变量2(JavaScript):
<script>
// Open mailto links in a new tab
function mailto(th) {
    var url = th.getAttribute('href');
    window.open(url);
}
</script>

<a href="mailto:test@gmail.com?subject=Subject&body=Body" onclick="mailto(this);event.preventDefault()">test@gmail.com</a>

变量3(jQuery):
<script>
// Open mailto links in a new tab
$('#mailto').click(function (e) {
    e.preventDefault();
    var url = $(this).attr('href');
    window.open(url);
});
</script>

<a href="mailto:test@gmail.com?subject=Subject&body=Body" id="mailto">test@gmail.com</a>

变量 4(jQuery):

<script>
// Open mailto links in a new tab
$("a[href^='mailto:']").click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    var target = $(this).attr('target');
    window.open(href, target ? target : '_self');
});
</script>

<a href="mailto:test@gmail.com?subject=Subject&body=Body" target="_blank">test@gmail.com</a>

HTML target 属性:https://www.w3schools.com/tags/att_a_target.asp

内联处理程序是相当不好的做法 - 考虑使用JavaScript正确地附加处理程序。 - CertainPerformance
我添加了另一个选项。 - Botyk

1
你试过使用“中键点击”(“在新标签页中打开”)吗? 这对我很有效。

(http://forums.mozillazine.org/viewtopic.php?f=7&t=1842595)

虽然要求用户进行中键单击似乎特别奇怪

不管怎样,我已经找到了一个伪解决方案,在FF 25 / Chrome 35中似乎可以工作

1. - 设置您的链接类似于此:

<a href="javascript:void()"
 class="mailToLink" 
data-mail="mailaddr@domain.com">mailaddr@domain.com </a>

2.- 使用 JavaScript(例如使用 jQuery)设置一个 onclick 事件,如下:

    $('.mailToLink').on('click', function(){
        mailto=$(this).data('mail');
        w=window.open('','_blank','',true);
        w.location.href='mailto:'+mailto;
        w.focus();
    });

这将打开一个空白的新窗口/选项卡,稍后更改其位置,因此邮件协议处理程序无法在新窗口已经打开之前进行操作

未与本地邮件客户端(Outlook等)进行测试


"中键点击"的投票 - 火狐浏览器,什么鬼? - Steve

-3

这个问题有一个便宜的HTML技巧解决方法......

在一个页面上的链接......

<a href="/mailto.html" target="_blank">Mail</a>

在mailto.html文件中...

<meta HTTP-EQUIV="REFRESH" content="0; url=mailto:who@website.com">

If nothing pops up click.....<a href="mailto:who@website.com">Mail!</a>

_blank会打开一个新的标签页或窗口,而meta标签则完成其余部分。当然,链接也是备选项。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接