mailto-Link mit HTML-Text

Question

Ich habe ein paar mailto Links in einem HTML-Dokument.

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

Kann ich einen HTML-formatierten Textkörper in die mailto: Teil des href ?

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

Beachten Sie, dass es (2016) unter iOS völlig in Ordnung ist, die <i> y <b> Tags für einfache kursive und fette Formatierungen.

Answer 1

Einige Dinge sind möglich, aber nicht alle, z.B. wenn Sie Zeilenumbrüche wünschen, anstatt die <br /> verwenden. %0D%0A

Beispiel:

<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>

Answer 2

Es ist erwähnenswert, dass zumindest in Safari auf dem iPhone das Einfügen von einfachen HTML-Tags wie <b> , <i> y <img> (das Sie idealerweise ohnehin nicht mehr in anderen Situationen verwenden sollten, sondern CSS bevorzugen) in den Parameter body in der Datei mailto: scheint zu funktionieren - sie werden vom E-Mail-Client beachtet. Ich habe noch nicht ausführlich getestet, ob dies auch von anderen Kombinationen aus mobilem oder Desktop-Browser und E-Mail-Client unterstützt wird. Es ist auch zweifelhaft, ob dies wirklich standardkonform ist. Könnte aber nützlich sein, wenn Sie für diese Plattform entwickeln.

Wie in anderen Antworten erwähnt, sollten Sie auch encodeURIComponent für den gesamten Body verwenden, bevor Sie ihn in die mailto: Link.

Answer 3

Thunderbird unterstützt html-body : mailto:me@me.com?subject=Me&html-body=<b>ME</b>

Answer 4

Auch wenn dies innerhalb der URL-Parameter nicht möglich ist, gibt es eine freche Lösung, die vollständiges HTML erlaubt. Das Konzept besteht darin, dass Sie ein verstecktes Element auf der Seite haben (ich verwende Bootstrap und Jquery in dem Beispiel unten), das vorübergehend aufgedeckt und der HTML-Code kopiert wird (wie hier: Wie kopiere ich Text aus einem Div in die Zwischenablage? ). Danach leiten Sie den Benutzer auf den Mail-Link um, so dass er nur noch auf Einfügen in seinem Mail-Programm klicken muss. Ich habe dies nur unter Linux/Thunderbird getestet, aber das Einfügen funktioniert auch in 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');
})

Answer 5

Jeder kann das Folgende ausprobieren (die mailto-Funktion akzeptiert nur Klartext, aber hier zeige ich, wie man HTML-Innertext-Eigenschaften verwendet und wie man einen Anker als mailto-Body-Parameter hinzufügt):

//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