javascript 在按钮单击时发送电子邮件

📌 相关文章

📜 javascript 在按钮单击时发送电子邮件 - Javascript (1)

📅 最后修改于: 2023-12-03 15:16:10.886000 🧑 作者: Mango

在前端开发中，有时需要在网页中添加发送电子邮件的功能，可以通过Javascript来实现。本文将介绍如何在按钮单击时通过Javascript向指定的邮箱地址发送电子邮件。

实现步骤

步骤一：构建HTML页面

首先，需要在HTML页面中添加一个按钮以及一些文本框，用于输入邮件相关的内容。以下是一个简单的HTML页面示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Javascript发送电子邮件</title>
</head>
<body>
  <form>
    <div>
      <label for="to">收件人：</label>
      <input type="email" id="to" name="to" required>
    </div>
    <div>
      <label for="subject">主题：</label>
      <input type="text" id="subject" name="subject" required>
    </div>
    <div>
      <label for="message">内容：</label>
      <textarea id="message" name="message" required></textarea>
    </div>
    <button id="sendMailBtn" type="button">发送邮件</button>
  </form>
</body>
</html>

步骤二：实现Javascript代码

在页面头部添加以下Javascript代码：

<script type="text/javascript">
  const sendButton = document.getElementById('sendMailBtn');
  sendButton.addEventListener('click', sendMail);

  function sendMail() {
    const to = document.getElementById('to').value;
    const subject = document.getElementById('subject').value;
    const message = document.getElementById('message').value;
    const mailto_link = "mailto:" + to + "?subject=" + subject + "&body=" + message;

    window.open(mailto_link, "emailWindow");
  }
</script>

以上代码中，获取了按钮、收件人、主题和内容文本框的值，并使用mailto:链接生成邮件发送地址，最后通过window.open()方法打开默认的电子邮件客户端。

步骤三：测试发送邮件

在浏览器中打开HTML页面示例，在收件人、主题和内容文本框中填写相应信息，点击"发送邮件"按钮，即可弹出默认的电子邮件客户端（如Outlook）编辑邮件并发送。

结语

通过Javascript实现在按钮单击时发送电子邮件，可以方便地实现网页中的联系我们、反馈等功能。希望本文对各位开发者能有所帮助。