logo标签列表

我可以使用mailto链接设置邮件主题和内容吗？

htmlemailmailto
1069

当使用mailto时，是否可以设置邮件的主题/内容？

2
相关 https://css-tricks.com/snippets/html/mailto-links/ - Adriano
15
您可以设置电子邮件的每一个部分。这是我制作的一个工具，使它变得非常简单：https://mailto.now.sh - Dawson B
15个回答
5
这里有一个可运行的片段，可以帮助您生成带有可选主题和正文的mailto链接。 

function generate() {
  var email = $('#email').val();
  var subject = $('#subject').val();
  var body = $('#body').val();

  var mailto = 'mailto:' + email;
  var params = {};
  if (subject) {
    params.subject = subject;
  }
  if (body) {
    params.body = body;
  }
  if (params) {
    mailto += '?' + $.param(params);
  }

  var $output = $('#output');
  $output.val(mailto);
  $output.focus();
  $output.select();
  document.execCommand('copy');
}

$(document).ready(function() {
  $('#generate').on('click', generate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="email" placeholder="email address" /><br/>
<input type="text" id="subject" placeholder="Subject" /><br/>
<textarea id="body" placeholder="Body"></textarea><br/>
<button type="button" id="generate">Generate & copy to clipboard</button><br/>
<textarea id="output">Output</textarea>

5
请注意，根据RFC 2368，不可能在消息正文中使用HTML：

特殊的hname“body”表示相关的hvalue是邮件的正文。 "body" hname应该包含邮件第一个text/plain正文部分的内容。 mailto URL主要用于生成实际上是自动处理内容(例如邮件列表的“subscribe”邮件)的短文本消息，而不是一般的MIME正文。

来源：https://dev59.com/8G035IYBdhLWcg3wGMHa#13415988
2
这个问题在询问如何设置主题和内容，没有提到格式。虽然在回答中提到这一点很有用，但你忽略了关于什么是可能的以及如何实现它的部分。没有这些内容，这只是一个评论，而不是一个答案。 - Quentin
1
Jure，非常感谢您将这个作为答案回答在这个问题中，因为这正是我需要找到并自己询问的。所以虽然Quentin认为这不是对OP问题的回答，但它回答了我正在寻找并引起了我阅读这篇文章的问题。非常感谢您，Jure！ - bytor99999
1
如果您想在电子邮件中添加HTML内容，请对消息正文中的HTML代码进行URL编码并将其包含在mailto链接代码中，但问题在于您无法通过此链接将电子邮件类型从纯文本设置为HTML，使用链接的客户端需要默认发送HTML电子邮件的邮件客户端。 如果您想测试，请使用以下简单mailto链接的代码，其中包含在链接中的图像（angular样式的网址可用于显示）：
<a href="mailto:?body=%3Ca%20href%3D%22{{ scope.url }}%22%3E%3Cimg%20src%3D%22{{ scope.url }}%22%20width%3D%22300%22%20%2F%3E%3C%2Fa%3E">

HTML标签已进行URL编码。

你能否也发布一个例子，其中<body>标签只有href和文本在其之间以及结束标记吗？谢谢。 - bytor99999
<a href="<same as above>">这是链接文本</a> @user1567291 - sed
这不起作用。电子邮件客户端只会将所有HTML标记显示为文本，而不是将其处理为富文本文档。 - Ε Г И І И О
1

你只需要一个简单的 HTML 文档。

<a href="mailto:email@example.com?subject=This is a subject&body=This is body">Send an email</a>
0

如果要动态使用mailto链接，请参考以下代码

        const formConsultation = document.querySelector('form#form-consultation');
        formConsultation.addEventListener("submit", function(evt) {
            evt.preventDefault();
            var targetobj = evt.target;
            var actionUrl = targetobj.action;
            var message = targetobj.message.value;
            if (actionUrl && actionUrl != "#" && message) {
                var newBodyMsg = subject = "";
                var username = targetobj.username.value;
                var useremail = targetobj.useremail.value;

                if (targetobj.subject.value && targetobj.subject.value.trim().length > 0) {
                    subject = targetobj.subject.value;
                }

                if (username.trim().length > 0) {
                    newBodyMsg += "Hi! my name is " + username + ".";
                }
                if (useremail.trim().length > 0) {
                    if (newBodyMsg.length > 0) {
                        newBodyMsg += " & ";
                    }
                    newBodyMsg += "my email address is " + useremail + ".";
                }

                if (newBodyMsg.length > 0) {
                    newBodyMsg += "\n\n ";
                }
                newBodyMsg += message;
                window.open(actionUrl + "?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(newBodyMsg));
            }
        });
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<body>
  <div class="container">
    <form action="mailto:example@test.com" method="get" enctype="text/plain" class="form-consultation" id="form-consultation">
      <div class="mb-3">
        <label class="form-label">Name</label>
        <input type="text" class="form-control" name="username" placeholder="Your Name" required>
      </div>
      <div class="mb-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control" name="useremail" placeholder="Your Email address" required>
      </div>
      <div class="mb-3">
        <label class="form-label">Subject</label>
        <input type="text" class="form-control" name="subject" placeholder="Subject" required>
      </div>
      <div class="mb-3">
        <label class="form-label">Message</label>
        <textarea cols="30" rows="3" class="form-control" name="message" placeholder="Message" required></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Send A Message</button>
    </form>
  </div>
</body>

或者使用 Jquery

$('#form-consultation').submit(function() {
    event.preventDefault(); // this will prevent the default submit

    var actionUrl = $(this).attr('action');
    var message = $(this).find("textarea[name=message]");
    if(actionUrl && actionUrl != "#" && message) {
        var newBodyMsg = subject = "";

        var username = $(this).find("input[name=username]").val();
        var useremail = $(this).find("input[name=useremail]").val();
        if(username.trim().length > 0) {
            newBodyMsg += "Hi! my name is " + username + ".";
        }
        if(useremail.trim().length > 0) {
            if(newBodyMsg.length > 0) {
                newBodyMsg += " & ";
            }
            newBodyMsg += "my email address is " + useremail + ".";
        }

        if (newBodyMsg.length > 0) {
            newBodyMsg += "\n\n ";
        }
        newBodyMsg += message.val();
        window.open(actionUrl + "?subject="+ encodeURIComponent(subject) +"&body=" + encodeURIComponent(newBodyMsg));
    }
    
    return false;
});

注意：请在您的系统中运行上述代码。如果您尝试在此处（stackoverflow片段）运行代码，则无法正常工作，因为stackoverflow会阻止它。因此，请在本地系统中测试此代码。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接