[英]How to open mailto links in new tab for users that have gmail as the default mail handler?
在网页上,mailto链接打开默认的电子邮件客户端。 既然Chrome提供了将Gmail设置为默认电子邮件客户端的功能,则某些用户可以在同一窗口中打开链接,从而将其从他们点击链接的页面中取出(他们不喜欢)
我已经尝试将目标_blank添加到链接,这对gmail用户很有用,但会让Outlook用户感到厌烦,因为每次单击mailto链接时都会打开一个新的空白选项卡。
我有办法检测默认的电子邮件处理程序,并为这两类用户提供良好的体验?
好的,所以我能够在Mac上的Chrome中使用它。 你的旅费可能会改变。 此外,这是非常hacky 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打开一个新标签页,其中上一页安全地位于其自己的标签页中。
注意:在操作系统端(至少在Mac上)将Gmail设置为电子邮件处理程序后,Chrome将被设置为系统的电子邮件处理程序。 因此,即使您关闭Gmail作为Chrome中的电子邮件处理程序,它仍然设置在操作系统级别。 所以为了重置它,我去了Mail> Prefs> General。 并将默认邮件阅读器设置回Mail。
我收到了在ownCloud Contacts中实现此请求的请求 ,虽然我也认为它有点hackish,似乎没有另一种方法来检测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);
}
我只是想说,对于Firefox,有一个简单的解决方案。
像这样构建你的链接:
<a href="#" data-mailto="somebody@email.com">Mail Somebody</a>
为这些设置单击处理程序。
$('a[data-mailto]').click(function(){
window.open($(this).data('mailto'));
});
如果Chrome也接受它会很棒。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.