在前端开发中，我们常常需要让用户可以发送邮件。使用 mailto 链接是一种简单而有效的方式。本文将向你介绍如何使用 jQuery 和 JavaScript 创建一个 mailto 链接，并通过点击链接发送邮件。
什么是 mailto 链接？
mailto 链接是一种 URL 方案，用于启动用户默认的电子邮件客户端并自动填写收件人、主题和正文等信息。当用户点击 mailto 链接时，浏览器会打开默认的邮件应用程序并自动填充所需的字段。例如，以下 mailto 链接将打开默认的邮件应用程序并填写收件人地址为 example@example.com，主题为 Hello，正文为 World：
<a href="mailto:example@example.com?subject=Hello&body=World">Send Email</a>
使用 jQuery 和 JavaScript 创建 mailto 链接
要创建 mailto 链接，可以使用以下 jQuery 和 JavaScript 代码：
-- -------------------- ---- -------
------------ -
---------------------------------- -
--- ----- - ----------------------
--- ------- - --------
--- ---- - --------
--- ---------- - --------- - ----- - ----------- - --------------------------- - -------- - -------------------------
-------------------- - -----------
------ ------
---
---在这段代码中：
$()函数是 jQuery 的一个快捷方式，用于等待文档加载完成后执行代码。$('a.send-email').click()监听了一个 class 为send-email的链接的点击事件。email，subject和body变量分别设置了电子邮件的收件人地址、主题和正文。encodeURIComponent()函数可以将字符串编码为 URL 安全的格式。window.location.href将页面重定向到mailto链接。
示例代码
下面是一个完整的示例代码，可以将其复制并粘贴到 HTML 文件中进行测试：
-- -------------------- ---- -------
--------- -----
------
------
----------- ----- --- --------------
------- -----------------------------------------------------------
--------
------------ -
---------------------------------- -
--- ----- - ----------------------
--- ------- - --------
--- ---- - --------
--- ---------- - --------- - ----- - ----------- - --------------------------- - -------- - -------------------------
-------------------- - -----------
------ ------
---
---
---------
-------
------
-- -------- ----------------------- ---------
-------
-------在这个示例中，我们使用了 jQuery 3.6.0 版本，并创建了一个带有 send-email 类名的链接。当用户点击此链接时，jQuery 会触发监听事件并启动默认的邮件应用程序。
结论
在本文中，我们介绍了如何使用 jQuery 和 JavaScript 创建一个 mailto 链接，并在用户点击链接时自动发送邮件。通过这种方法，我们可以为用户提供一种简单而有效的方式来联系我们或发送反馈。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13019