JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端

2023年5月19日下午6:37 • JavaScript

在JS中使用mailto协议可以实现将用户输入的内容传递到本地邮件客户端。mailto协议是一种特殊的URL协议，使用具有mailto之前缀的超链接或javascript中的window.location.href等方法可以触发邮件客户端的启动。

以下是实现将用户在网页中输入的内容传递到本地邮件客户端的完整攻略：

1.编写HTML代码

首先，需要在HTML中添加一个表单，用于用户输入邮件的相关内容，例如收件人地址、主题和正文等。这个例子使用了最简单的表单，只包含一个文本域和一个按钮：

<form action="javascript:void(0);">
  <label for="email">收件人：</label>
  <input type="text" id="email" name="email" required>
  <br>
  <label for="subject">主题：</label>
  <input type="text" id="subject" name="subject" required>
  <br>
  <label for="body">正文：</label>
  <textarea id="body" name="body" rows="10" cols="30" required></textarea>
  <br>
  <button type="button" onclick="sendEmail()">发送邮件</button>
</form>

注意，以上的表单中添加了required属性来确保这些字段不能为空。

2.编写JavaScript代码

在JavaScript中，需要获取表单的值，并使用window.location.href来触发邮件客户端的启动。window.location.href是一个特殊的属性，可以直接修改当前窗口的URL，使用mailto:协议作为前缀和具体的参数，就可以启动邮件客户端并传递相关信息。

以下是一个简单的sendEmail函数示例：

function sendEmail() {
  const email = document.getElementById('email').value;
  const subject = document.getElementById('subject').value;
  const body = document.getElementById('body').value;
  const encodedBody = encodeURIComponent(body);
  const href = `mailto:${email}?subject=${subject}&body=${encodedBody}`;
  window.location.href = href;
}

在这个函数中，首先获取了表单中输入的收件人地址、主题和正文。由于邮件客户端需要使用URL编码的正文，在这里使用了encodeURIComponent函数进行编码。接着，使用这些值构造了mailto: URL，并把它赋值给window.location.href属性，触发邮件客户端的启动并传递参数。

3.示例

下面是两个完整的发送邮件示例：

示例一

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>发送邮件示例</title>
  </head>
  <body>
    <form action="javascript:void(0);">
      <label for="email">收件人：</label>
      <input type="text" id="email" name="email" required>
      <br>
      <label for="subject">主题：</label>
      <input type="text" id="subject" name="subject" required>
      <br>
      <label for="body">正文：</label>
      <textarea id="body" name="body" rows="10" cols="30" required></textarea>
      <br>
      <button type="button" onclick="sendEmail()">发送邮件</button>
    </form>
    <script>
      function sendEmail() {
        const email = document.getElementById('email').value;
        const subject = document.getElementById('subject').value;
        const body = document.getElementById('body').value;
        const encodedBody = encodeURIComponent(body);
        const href = `mailto:${email}?subject=${subject}&body=${encodedBody}`;
        window.location.href = href;
      }
    </script>
  </body>
</html>

示例二

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>发送邮件示例2</title>
  </head>
  <body>
    <form action="javascript:void(0);">
      <label for="email">收件人：</label>
      <input type="text" id="email" name="email" required>
      <br>
      <label for="subject">主题：</label>
      <input type="text" id="subject" name="subject" required>
      <br>
      <label for="body">正文：</label>
      <textarea id="body" name="body" rows="10" cols="30" required></textarea>
      <br>
      <button type="button" onclick="sendEmail()">发送邮件</button>
    </form>
    <script>
      function sendEmail() {
        const email = document.getElementById('email').value;
        const subject = document.getElementById('subject').value;
        const body = document.getElementById('body').value;
        const encodedBody = encodeURIComponent(body);
        const href = `mailto:${email}?subject=${subject}&body=${encodedBody}`;
        const newWindow = window.open(href, '_blank');
        if (!newWindow) {
          alert('找不到邮件客户端，请手动复制邮件内容发送！')
        }
      }
    </script>
  </body>
</html>

这两个示例非常相似，唯一的区别在于sendEmail函数的最后，第一个示例使用了window.location.href，直接触发邮件客户端的启动；而第二个示例使用了window.open打开一个新窗口，并传递mailto: URL，如果当前浏览器没有设置邮件客户端，则会弹出提示框。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端 - Python技术站