mailto ссылка с телом HTML
У меня есть пара mailto
ссылки в HTML-документе.
<a href="mailto:etc...">
Могу ли я вставить тело в формате HTML в mailto:
часть href
?
<a href="mailto:me@me.com?subject=Me&body=<b>ME</b>">Mail me</a>
Обратите внимание, что (2016) в iOS, это прекрасно, чтобы добавить <i>
а также <b>
теги для простого курсива, жирного форматирования.
14 ответов
Как вы можете видеть в RFC 6068, это вообще невозможно:
Специальный
<hfname>
"тело" указывает, что связанный<hfvalue>
это тело сообщения. Значение поля "body" предназначено для содержания содержимого первой текстовой / простой части тела сообщения. Поле псевдозаголовка "body" в первую очередь предназначено для генерации коротких текстовых сообщений для автоматической обработки (таких как сообщения "подписка" для списков рассылки), а не для общих тел MIME.
Хотя использовать 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;
Это не совсем то, что вам нужно, но возможно с помощью современного javascript создать EML-файл на клиенте и передать его в файловую систему пользователя, которая должна открыть расширенную электронную почту, содержащую HTML, в его почтовой программе, такой как Outlook:
Вот jsfiddle электронного письма, содержащего изображения и таблицы: https://jsfiddle.net/seanodotcom/yd1n8Lfh/
HTML
<!-- 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);
})();
Я использовал это, и похоже, что он работает с outlook, не используя html, но вы можете форматировать текст по крайней мере, когда тело добавляется в качестве вывода.
<a href="mailto:email@address.com?subject=Hello world&body=Line one%0DLine two">Email me</a>
Некоторые вещи возможны, но не все, скажем, например, вы хотите разрывы строк вместо использования <br />
использование %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>
Стоит отметить, что в Safari на iPhone, по крайней мере, вставляются основные теги HTML, такие как <b>
, <i>
, а также <img>
(который в идеале вам больше не следует использовать в других обстоятельствах, предпочитая CSS) в параметре body в mailto:
действительно работает - их уважают в почтовом клиенте. Я не провел исчерпывающее тестирование, чтобы увидеть, поддерживается ли это другими мобильными или настольными браузерами / почтовыми клиентами. Также сомнительно, действительно ли это соответствует стандартам. Может быть полезно, если вы строите для этой платформы, хотя.
Как отмечалось в других ответах, вы должны также использовать encodeURIComponent на всем теле, прежде чем встраивать его в mailto:
ссылка на сайт.
Thunderbird поддерживает html-body
: mailto:me@me.com?subject=Me&html-body=<b>ME</b>
Хотя это может быть невозможно в рамках параметра URL, существует дерзкое решение, позволяющее использовать полный HTML. Идея заключается в том, что у вас есть скрытый элемент на странице (в приведенном ниже примере я использую Bootstrap и Jquery), который временно открывается, а HTML копируется (как здесь: Как скопировать текст из div в буфер обмена). После этого вы перенаправляете пользователя на ссылку «Почта», поэтому все, что им нужно сделать, — это нажать «Вставить» в назначенной им почтовой программе. Я тестировал это только на Linux/Thunderbird, но вставка также работает в сети Gmail.
<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');
})
Любой может попробовать следующее (функция mailto принимает только открытый текст, но здесь я покажу, как использовать свойства внутреннего текста HTML и как добавить привязку в качестве параметров mailto body):
//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
У меня такая же проблема с совместным использованием html. Я делаю для себя работу с HTML. Замените <на <&> на>.
<a href="mailto:?subject=link Share&body=<a href='www.google.com'>google</a>">Email</a>
Примечание: работает только в ubuntu. В окнах работать не будет.
Можно вводить значения Юникода для вставки новых строк (например, '\u0009'), но теги HTML имеют различную степень поддержки и их следует избегать.
Я работал так:
var newLine = escape("\n");
var body = "Hello" + newLine +"World";
Выход будет:
Hello
World
Вот как вы все добавляете в ссылку MAILTO:
<a href="mailto:YourName@YourSite.com? cc=someone@YourSite.com&bcc=someoneElse@YourSite.com &subject=Shipping%20Information%20Request&body=Please%20tell%20me%20if%20my%20order%20has%20shipped!">Shipping Request</a>
Каждый компонент отделяется знаком амперсанда (&). Только первый компонент после исходного адреса электронной почты имеет знак вопроса (?), Предшествующий амперсанду.
URL-кодирование является ключом! Так что для вашего примера тела, а не вашего
href='mailto:me@me.com?subject=Me&body=<b>ME</b>'
... вы можете попробовать:
href='mailto:me@me.com?subject=Me&body=%3cb%3eME%3c%2fb%3e'
Вот еще один маршрут, который вы можете попробовать. Создайте функцию javascript для открытия объекта ActiveX. К сожалению, это ограничивает работу только в IE и Outlook и может привести к тому, что на вашей странице будут отображаться предупреждения activex. Но если вы можете жить с этими предостережениями, это делает работу. Вот рабочий образец, из которого вы можете извлечь:
<html>
<head>
<script type='text/javascript' language='javascript'>
function OpenOutlookNewEmail()
{
try
{
var outlookApp = new ActiveXObject("Outlook.Application");
var nameSpace = outlookApp.getNameSpace("MAPI");
mailFolder = nameSpace.getDefaultFolder(6);
mailItem = mailFolder.Items.add('IPM.Note.FormA');
mailItem.Subject = "Me";
mailItem.To = "me@me.com";
mailItem.HTMLBody = "<b>ME</b>";
mailItem.display(0);
}
catch (e)
{
alert(e);
// act on any error that you get
}
}
</script>
</head>
<body>
<a href='javascript:OpenOutlookNewEmail()' >email</a>
</body>
</html>