如何实现点击按钮打开邮箱网站或手机邮箱应用收件箱

mailto:协议的设计目标就是唤起邮件撰写页，无法直接进入收件箱，需要根据访问场景分别用对应方案实现：

桌面端：新标签页打开网页版邮箱收件箱 #

主流公共网页邮箱的收件箱都有固定访问路径，直接通过新标签打开对应地址即可，用户处于登录状态时会直接进入收件箱，未登录时会先跳转登录页，登录完成后自动回到收件箱：

• Gmail：收件箱路径为https://mail.google.com/mail/u/0/#inbox
• 网页版Outlook：收件箱路径为https://outlook.live.com/mail/0/inbox
• 网页版Yahoo Mail：收件箱路径为https://mail.yahoo.com/d/folders/1

如果需要适配多邮箱，可以在按钮点击后先弹出选择框让用户选择自己常用的邮箱，将选择结果存在本地缓存，后续点击直接跳转对应地址即可。

移动端：唤起本地邮箱APP进入收件箱 #

移动端直接进邮箱收件箱需要调用对应邮箱APP的私有URL Scheme，不能使用mailto:协议，常用邮箱的收件箱唤起Scheme如下：

• iOS/安卓原生系统邮箱：可尝试通用Schememessage://唤起，会直接进入收件箱列表
• Gmail APP：收件箱Scheme为googlegmail:///inbox
• Outlook APP：收件箱Scheme为ms-outlook://inbox
• Yahoo Mail APP：收件箱Scheme为ymail://mail/inbox

由于移动端没有100%兼容的方案检测用户是否安装了对应APP，通用实现逻辑是先尝试唤起APP Scheme，设置短超时，若超时未唤起则自动跳转网页版收件箱兜底，参考实现代码：

// 按钮点击绑定该方法即可
const openMailInbox = () => {
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  // 此处可替换为用户自行选择的邮箱配置
  const mailConfig = {
    appScheme: 'googlegmail:///inbox',
    webUrl: 'https://mail.google.com/mail/u/0/#inbox'
  }

  if (isMobile) {
    const jumpTimer = setTimeout(() => {
      window.open(mailConfig.webUrl, '_blank')
    }, 2000)
    window.location.href = mailConfig.appScheme
    // 成功唤起APP后清除定时器，不会触发网页跳转
    window.addEventListener('pagehide', () => clearTimeout(jumpTimer), { once: true })
  } else {
    // 桌面端直接新标签打开网页版，加noopener防止安全风险
    window.open(mailConfig.webUrl, '_blank', 'noopener noreferrer')
  }
}

注意事项 #

• 不同安卓厂商、不同版本的邮箱APP可能存在URL Scheme调整，不建议强制写死某一个邮箱的跳转逻辑，最好提供选项让用户选择自己常用的邮箱
• 企业自有域名邮箱直接替换为对应邮箱系统的收件箱固定路径即可，实现逻辑和公共邮箱一致
• 若需要适配多账号场景，可在路径中调整对应账号的参数，比如Gmail路径中的/u/0对应登录的第一个账号，/u/1对应第二个账号，以此类推

内容的提问来源于stack exchange，提问作者Ayofayomi