如何通过JavaScript window.open传递表单变量至网页版邮件客户端？

明确说：可以实现，但不同网页版邮件客户端的URL参数格式存在差异，需要针对目标客户端调整参数拼接逻辑。

你的现有代码问题 #

当前代码有两处明显错误：

1. 窗口名称参数（window.open的第二个参数）不该拼接emailAddress，_blank本身就是指定新窗口的标识，额外内容会导致窗口名称异常
2. subject和body这类参数应该拼在邮件客户端的URL末尾，而非窗口名称里

错误代码示例：

window.open("https://gmail.com", "_blank" + emailAddress + '?subject=My Learning Journal&body=' + contents);

非Gmail客户端的正确实现示例 #

以下是主流非Gmail网页版邮件客户端的实现方式：

1. Outlook网页版 #

// 假设emailAddress为收件人邮箱地址
const outlookUrl = `https://outlook.live.com/mail/0/deeplink/compose?to=${encodeURIComponent(emailAddress)}&subject=${encodeURIComponent('My Learning Journal')}&body=${encodeURIComponent(contents)}`;
window.open(outlookUrl, '_blank');

2. Yahoo邮件网页版 #

const yahooUrl = `https://mail.yahoo.com/compose?to=${encodeURIComponent(emailAddress)}&subject=${encodeURIComponent('My Learning Journal')}&body=${encodeURIComponent(contents)}`;
window.open(yahooUrl, '_blank');

3. 通用注意事项 #

• 必须用encodeURIComponent()对收件人、主题、正文等所有变量编码，避免空格、&、中文等特殊字符导致参数失效
• 不同客户端的参数名可能不同，部分客户端正文参数用text而非body，需查对应客户端的官方文档确认规则
• 若要让用户自行选择邮件客户端，可提供下拉菜单，根据用户选择拼接对应URL

通用封装函数示例 #

可以写一个函数统一处理不同客户端的URL生成：

function openWebMailClient(clientType, to, subject, body) {
  const encodedTo = encodeURIComponent(to);
  const encodedSubject = encodeURIComponent(subject);
  const encodedBody = encodeURIComponent(body);
  
  let url = '';
  switch(clientType) {
    case 'outlook':
      url = `https://outlook.live.com/mail/0/deeplink/compose?to=${encodedTo}&subject=${encodedSubject}&body=${encodedBody}`;
      break;
    case 'yahoo':
      url = `https://mail.yahoo.com/compose?to=${encodedTo}&subject=${encodedSubject}&body=${encodedBody}`;
      break;
    // 可扩展添加其他客户端
    default:
      alert('不支持该邮件客户端');
      return;
  }
  window.open(url, '_blank');
}

// 点击按钮时调用示例
document.querySelector('#sendEmailBtn').addEventListener('click', () => {
  const emailAddress = document.querySelector('#recipientEmail').value;
  const contents = document.querySelector('#emailContent').value;
  openWebMailClient('outlook', emailAddress, 'My Learning Journal', contents);
});

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