collegamento mailto con corpo HTML


319

Ho un paio di mailtocollegamenti in un documento HTML.

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

Posso inserire un corpo in formato HTML nella mailto:parte del href?

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

Si noti che (2016) in iOS, è perfettamente corretto aggiungere <i>e <b>tag per una semplice formattazione in corsivo e grassetto.


1
Aveva esattamente la stessa cosa in mente e l'ho studiata per un po '. Stavo cercando di avere un <img> remoto incorporato nel corpo del messaggio. L'istruzione mailto deve essere codificata in URL affinché funzioni. Il risultato con thunderbird fu che il corpo HTML appariva letteralmente, con tutte le sue istruzioni <img> e tutto. Immagino che questo sia un problema di sicurezza in thunderbird e nella maggior parte dei client di posta: analizzano il contenuto della posta in arrivo in modo che non faccia nulla di sospetto.
Hannes R.,

4
Il meglio che ho trovato è arrivato da questa pagina, zaposphere.com/html-email-links-code .. In fondo alla lista c'è un elenco: "Altre fantastiche personalizzazioni che la maggior parte degli altri siti Web non menziona !!" Mi ha aiutato molto.
Stu Andrews,

Puoi impostare ogni parte di un'e-mail con un testo di base. Per quanto riguarda le limitazioni che la formattazione html non è possibile, ecco uno strumento che ho creato per rendere semplice la personalizzazione dei vari campi in un mailto dead: mailto.now.sh
Dawson B

Risposte:


428

Come puoi vedere in RFC 6068 , questo non è affatto possibile:

Il <hfname>"corpo" speciale indica che il associato <hfvalue> è il corpo del messaggio. Il valore del campo "body" è destinato a contenere il contenuto della prima parte di testo / corpo normale del messaggio. Il campo pseudo header "body" è principalmente destinato alla generazione di brevi messaggi di testo per l'elaborazione automatica (come i messaggi "iscriviti" per le mailing list), non per gli organismi MIME generali.


4
@JoeBlow La risposta è ancora corretta. RFC 6068 che viola 2368 afferma ancora che il corpo è un testo semplice.
Markus Laire,

8
Se sei deluso da questa risposta, continua a leggere: stackoverflow.com/a/46699855/256272 (tl; file dr .eml)
Joe

95

No. Questo non è affatto possibile.


1
Non proprio vero. Mentre il supporto è molto scarso, altre risposte hanno dimostrato che un codice HTML limitato è possibile in iOS e una combinazione di IE + ActiveX + Outlook (urgh, yuck).
Simon East,

89

Sebbene NON sia possibile utilizzare HTML per formattare il tuo corpo e-mail, puoi aggiungere interruzioni di riga come è stato precedentemente suggerito.

Se sei in grado di utilizzare javascript, allora "encodeURIComponent ()" potrebbe essere utile come di seguito ...

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

1
I client di posta elettronica possono eseguire Javascript incorporato? L'OP afferma che si tratta di un'e-mail non di una pagina Web in cui si troverà il collegamento mailto :.
wide_eyed_pupil,

grazie, in Rails puoi usare la raw("text \n more text \n\n\t")funzione per incapsulare il testo e convertirlo in interruzioni di riga e schede per il corpo dell'email
FireDragon,

Questo ha funzionato per me, inviando da un "mailto" di Chrome a Outlook. Nota che devi solo codificare il testo del corpo, non l'intera stringa mailto; e non hai bisogno di spazi prima / dopo il \n.
Luca,

2
Mi è piaciuto questo approccio, ecco un jsfiddle per vederlo in azione: jsfiddle.net/oligray/5uosngy4
Oliver Gray,

3
Puoi anche usare% 0A per un'interruzione di linea, quindi non è necessario farlo da JavaScript.
Dirk Boer,

58

Ho usato questo e sembra funzionare con Outlook, non usando HTML ma è possibile formattare il testo con interruzioni di riga almeno quando il corpo viene aggiunto come output.

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

2
Quindi "% 0D" è newline. Qual è l'equivalente del codice di una scheda codificata?
wide_eyed_pupil,

3
% 0D è una nuova riga che è ctrl-m, una scheda è ctrl-i che è% 09. Dai un'occhiata a un grafico ASCII come questo [ asciitable.com/index/asciifull.gif] . I personaggi di controllo vanno dall'1 al 31. @wide_eyed_pupil
Jim Bergman,

2
Qualsiasi firma sembra essere rimossa durante questa operazione.
Valentin Despa,

% 0A sarebbe \ n
Klemen Tušar il

3
Questo non è un corpo HTML!
Chloe,

46

Non è esattamente quello che vuoi, ma è possibile utilizzare il moderno javascript per creare un file EML sul client e trasmetterlo al file system dell'utente, che dovrebbe aprire una ricca email contenente HTML nel loro programma di posta, come Outlook:

https://stackoverflow.com/a/27971771/8595398

Ecco un jsfiddle di una email contenente immagini e tabelle: 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);
})();

8
Questa è un'idea stravagante
Greg

2
Ottima idea, ma solo per la cronaca, sull'ultima Apple Mail, questo file si aprirà ma non sarà modificabile / inviabile, si comporta come un record di posta elettronica inviato
pmarreck

1
Con Apple Mail (11.2), una volta aperto il file .eml, puoi selezionare Messaggio / Invia di nuovo dal menu (shift-cmd-D) per mettere l'e-mail in modalità modifica.
Jeff Collier,

31

Alcune cose sono possibili, ma non tutte, per esempio, vuoi interruzioni di riga, invece di usare <br />use%0D%0A

Esempio:

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

7
Quello non è HTML ... ancora testo.
Brad

non se formatti la tua email usando $ mailheader. = "Tipo di contenuto: text / html; charset = iso-8859-1 \ r \ n";
Stephen Kaufman,

12
@StephenKaufman: non sei tu a inviare l'e-mail, ma i client che fanno clic sul collegamento. Significa che non sai come è impostato il client di posta elettronica. Non sai come sono impostate le intestazioni. Funzionerà su alcuni client di posta elettronica e non su altri.
Narxx,

1
grazie, questa è stata la seconda migliore opzione per me, se non riesco a fare html, almeno posso fare i ritorni a capo. per me andava bene.
hamish

16

Vale la pena sottolineare che su Safari su iPhone, almeno, l'inserimento di tag HTML di base come <b>, <i>e <img>(che idealmente non dovresti più utilizzare in altre circostanze, preferendo CSS) nel parametro body in mailto:sembra lavoro - sono onorati all'interno del client di posta elettronica. Non ho fatto test approfonditi per vedere se questo è supportato da altre combinazioni di browser / client di posta elettronica mobili o desktop. È anche dubbio che questo sia veramente conforme agli standard. Potrebbe essere utile se stai costruendo per quella piattaforma, però.

Come hanno notato altre risposte, è inoltre necessario utilizzare encodeURIComponent su tutto il corpo prima di incorporarlo nel mailto:collegamento.


Sì, funziona perfettamente per aggiungere semplici tag in grassetto, in corsivo - in iOS comunque.
Fattie

Su iOS non riesco a inviare l'e-mail corretta con <img src = 'mybase64' /> - in Gmail vedo base64 nel mio messaggio.
Vitaly Zdanevich,


0

Ho lo stesso problema per quanto riguarda la condivisione di HTML. Faccio qui sotto lavoro HTML per me. Sostituisci <con <&> con>.

<a href="mailto:?subject=link Share&body=&lt;a href='www.google.com'&gt;google&lt;/a&gt;">Email</a>

Nota: funziona solo in Ubuntu. Non funzionerà in Windows.


-1

Chiunque può provare quanto segue (la funzione mailto accetta solo testo normale, ma qui mostro come usare le proprietà del testo interno HTML e come aggiungere un ancoraggio come parametri 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

-3

È possibile inserire valori unicode per inserire nuove righe (cioè:) \u0009ma i tag HTML hanno vari gradi di supporto e dovrebbero essere evitati.


-11

Ho lavorato in questo modo:

var newLine = escape("\n");
var body = "Hello" + newLine +"World";

L'output sarebbe:

Hello
World  
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.