mailto链接的HTML主体

我在HTML文档中有一对mailto链接。

<a href="mailto:etc...">

我可以在hrefmailto:部分插入HTML格式的主体吗?

<a href="mailto:me@me.com?subject=Me&body=<b>ME</b>">Mail me</a>

请注意(2016)在iOS中,添加<i><b>标签用于简单的斜体粗体格式是完全没问题的。

561411 次浏览

不。这根本不可能。

我已经使用了这个,它似乎与outlook工作,不使用html,但你可以格式化文本与换行符,至少当正文被添加为输出。

<a href="mailto:email@address.com?subject=Hello world&body=Line one%0DLine two">Email me</a>

虽然不可能使用HTML来格式化你的电子邮件正文,你可以添加换行符,就像之前建议的那样。

如果你能够使用javascript,那么“encodeURIComponent()”可能会像下面这样使用…

var formattedBody = "FirstLine \n Second Line \n Third Line";
var mailToLink = "mailto:x@y.com?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;

值得指出的是,至少在iPhone上的Safari上,将诸如<b><i><img>(理想情况下,你不应该再在其他情况下使用,更倾向于CSS)这样的基本HTML标记插入mailto:的体参数中似乎是有效的——它们在电子邮件客户端中得到了尊重。我还没有做详尽的测试,看看其他移动或桌面浏览器/电子邮件客户端组合是否支持这一点。这是否真的符合标准也值得怀疑。不过,如果您正在为该平台进行构建,可能会有用。

正如其他响应所指出的,在将encodeURIComponent嵌入mailto:链接之前,还应该在整个body上使用encodeURIComponent。

正如你在RFC 6068中看到的,这根本是不可能的:

特殊的<hfname> "body"表示关联的<hfvalue> . 是消息的主体。“body"字段值用于 控件的第一个文本/普通主体部分的内容 消息。“body"伪报头字段主要用于 用于自动处理的短文本消息的生成(例如 作为“subscribe"邮件列表的消息),而不是一般的MIME 身体。< / p >

有些事情是可能的,但不是所有的,比如你想要换行,而不是使用<br />use %0D%0A

例子:

<a href="mailto:?subject=&body=Hello,%0D%0A%0D%0AHere is the link to the PDF Brochure.%0D%0A%0D%0ATo view the brochure please click the following link: http://www.uyslist.com/yachts/brochure.pdf"><img src="images/email.png" alt="EMail PDF Brochure" /></a>

这不是你想要的,但可以使用现代javascript在客户端创建一个EML文件,并将其传输到用户的文件系统,这应该会在他们的邮件程序中打开一个包含HTML的富电子邮件,如Outlook:

https://stackoverflow.com/a/27971771/8595398 < a href = " https://stackoverflow.com/a/27971771/8595398 " > < / >

这是一个包含图像和表格的电子邮件的jsfiddle: https://jsfiddle.net/seanodotcom/yd1n8Lfh/

超文本标记语言

<!-- https://jsfiddle.net/seanodotcom/yd1n8Lfh -->
<textarea id="textbox" style="width: 300px; height: 600px;">
To: User <user@domain.demo>
Subject: Subject
X-Unsent: 1
Content-Type: text/html


<html>
<head>
<style>
body, html, table {
font-family: Calibri, Arial, sans-serif;
}
.pastdue { color: crimson; }
table {
border: 1px solid silver;
padding: 6px;
}
thead {
text-align: center;
font-size: 1.2em;
color: navy;
background-color: silver;
font-weight: bold;
}
tbody td {
text-align: center;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<td><img src="http://www.laurell.com/images/logo/laurell_logo_storefront.jpg" width="200" height="57" alt=""></td>
<td align="right"><h1><span class="pastdue">PAST DUE</span> INVOICE</h1></td>
</tr>
</table>
<table width=100%>
<thead>
<th>Invoice #</th>
<th>Days Overdue</th>
<th>Amount Owed</th>
</thead>
<tbody>
<tr>
<td>OU812</td>
<td>9</td>
<td>$4395.00</td>
</tr>
<tr>
<td>OU812</td>
<td>9</td>
<td>$4395.00</td>
</tr>
<tr>
<td>OU812</td>
<td>9</td>
<td>$4395.00</td>
</tr>
</tbody>
</table>
</body>
</html>
</textarea> <br>
<button id="create">Create file</button><br><br>
<a download="message.eml" id="downloadlink" style="display: none">Download</a>

Javascript

(function () {
var textFile = null,
makeTextFile = function (text) {
var data = new Blob([text], {type: 'text/plain'});
if (textFile !== null) {
window.URL.revokeObjectURL(textFile);
}
textFile = window.URL.createObjectURL(data);
return textFile;
};


var create = document.getElementById('create'),
textbox = document.getElementById('textbox');
create.addEventListener('click', function () {
var link = document.getElementById('downloadlink');
link.href = makeTextFile(textbox.value);
link.style.display = 'block';
}, false);
})();

任何人都可以尝试以下(mailto函数只接受明文,但在这里我展示如何使用HTML内文属性,以及如何添加锚作为mailto主体参数):

//Create as many html elements you need.


const titleElement = document.createElement("DIV");
titleElement.innerHTML = this.shareInformation.title; // Just some string


//Here I create an <a> so I can use href property
const titleLinkElement = document.createElement("a");
titleLinkElement.href = this.shareInformation.link; // This is a url

...

let mail = document.createElement("a");


// Using es6 template literals add the html innerText property and anchor element created to mailto body parameter
mail.href =
`mailto:?subject=${titleElement.innerText}&body=${titleLinkElement}%0D%0A${abstractElement.innerText}`;
mail.click();


// Notice how I use ${titleLinkElement} that is an anchor element, so mailto uses its href and renders the url I needed

__abc2 __abc0: __abc1

虽然在URL参数中可能不可能,但有一个大胆的解决方案允许完整的HTML。这个概念是,你在页面上有一个隐藏的元素(我在下面的例子中使用Bootstrap和Jquery),它是临时显示和复制的HTML(按这里:如何将文本从一个div复制到剪贴板)。在此之后,您将用户重定向到邮件链接,因此实际上他们所要做的就是在指定的邮件程序中单击粘贴。我只在Linux/雷鸟上测试过,但粘贴也可以工作到Gmail web。

<div id="copyEmailText" class="d-none"><p><strong>This is some HTML</strong>. Please hit paste when your email program opens.</p>


function copyDivToClipboard(element) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand('copy');
window.getSelection().removeAllRanges();// to deselect
}


$('#copyEmail').on('click',function(){
$('#copyEmailText').toggleClass('d-none');
copyDivToClipboard($('#copyEmailText')[0]);
window.location.href = 'mailto:?subject=Email subject text';
$('#copyEmailText').toggleClass('d-none');
})