如何为将 gmail 作为默认邮件处理程序的用户在新选项卡中打开 mailto 链接?

2023-11-28前端开发问题
14

本文介绍了如何为将 gmail 作为默认邮件处理程序的用户在新选项卡中打开 mailto 链接?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

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

On a web page mailto links open the default e-mail client. Now that Chrome offers the ability to set Gmail as the default e-mail client, some users have the links open in the same window thus taking them away from the page they clicked the link (which they do not like)

我尝试将目标 _blank 添加到链接,这对 gmail 用户非常有用,但会让 Outlook 用户发疯,因为每次点击 mailto 链接时都会打开一个新的空白选项卡.

I have tried adding target _blank to the links, which works great for gmail users, but will drive Outlook users mad, because a new blank tab will open every time they click a mailto link.

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

I there a way to detect the default e-mail handler and offer a good experience for both types of users?

推荐答案

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

Okay, so I was able to get this working in Chrome on Mac. Your mileage may vary. Also, this is pretty hacky IMO, so it may not be worth it. Honestly this should exist as a setting within Chrome, and the behavior should be delegated to the website. E.g. Chrome should have an option: "[x] Always open mailto links in separate tab"

话虽如此,这就是你的做法.

That being said, here's how you do it.

首先像这样构建你的链接:

First construct your links like so:

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

然后为这些设置一个点击处理程序.

Then set a click handler for those.

$('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

There is an optional options argument to window.open that you can tweak. In fact I would almost recommend it, to see if you can get the generated window to be as unnoticable as possible. https://developer.mozilla.org/en/DOM/window.open

http://www.w3schools.com/jsref/met_win_open.asp(MDN 文档详尽无遗,而 w3schools 文档几乎更容易阅读)

http://www.w3schools.com/jsref/met_win_open.asp (the MDN doc is exhaustive, while the w3schools doc is almost easier to read)

接下来我们需要创建mailto.html 页面.现在您可能需要使用下面看到的超时.您甚至可以将其设置为非常短的值,例如 500 毫秒.

Next we need to create the mailto.html page. Now you may need to play around with the timeout you see below. You could probably even set this to something really short like 500ms.

<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 设置为我的默认电子邮件阅读器:

当我单击该链接时,它会在瞬间打开一个窗口,然后撰写一条空白消息.在浏览器中它会返回到原始页面.

When I click the link, it opens a window for a split second, then composes a blank message. In the browser it goes back to the original page.

在设置">高级">隐私">处理程序"下将 Gmail 设置为邮件阅读器:

当我点击该链接时,它会打开一个新的 Gmail 标签页,上一页安全地位于它自己的标签页中.

When I click the link, it opens a new tab to Gmail, with the previous page safely in it's own tab.

注意:一旦您将 Gmail 设置为您的电子邮件处理程序,在操作系统端(至少在 mac 上),Chrome 将被设置为系统的电子邮件处理程序.因此,即使您在 Chrome 中关闭 Gmail 作为电子邮件处理程序,它仍然是在操作系统级别设置的.所以要重置它,我去了邮件>首选项>常规.并将默认邮件阅读器设置回邮件.

Note: Once you set Gmail as your email handler, on the OS side (at least on mac), Chrome is set as the system's email handler. So even if you turn off Gmail as the email handler inside Chrome, it is still set on the OS level. So to reset that, I went to Mail > Prefs > General. And set default mail reader back to Mail.

这篇关于如何为将 gmail 作为默认邮件处理程序的用户在新选项卡中打开 mailto 链接?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

js删除数组中指定元素的5种方法
在JavaScript中,我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例: 1.使用splice()方法: let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182

JavaScript小数运算出现多位的解决办法
在开发JS过程中,会经常遇到两个小数相运算的情况,但是运算结果却与预期不同,调试一下发现计算结果竟然有那么长一串尾巴。如下图所示: 产生原因: JavaScript对小数运算会先转成二进制,运算完毕再转回十进制,过程中会有丢失,不过不是所有的小数间运算会...
2024-10-18 前端开发问题
301

JavaScript(js)文件字符串中丢失"\"斜线的解决方法
问题描述: 在javascript中引用js代码,然后导致反斜杠丢失,发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ,结果导致正则表达式中的\丢失。 问题原因: 该字符串含有\,javascript对字符串进行了转...
2024-10-17 前端开发问题
437

layui中table列表 增加属性 edit="date",不生效怎么办?
如果你想在 layui 的 table 列表中增加 edit=date 属性但不生效,可能是以下问题导致的: 1. 缺少日期组件的初始化 如果想在表格中使用日期组件,需要在页面中引入 layui 的日期组件,并初始化: script type="text/javascript" src="/layui/layui.js"/scrip...
2024-06-11 前端开发问题
455

Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript
Rails/Javascript: How to inject rails variables into (very) simple javascript(Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript)...
2024-04-20 前端开发问题
5

CoffeeScript 总是以匿名函数返回
CoffeeScript always returns in anonymous function(CoffeeScript 总是以匿名函数返回)...
2024-04-20 前端开发问题
13