ลิงก์ mailto กับเนื้อหา HTML

319

ฉันมี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 สามารถเพิ่มและแท็กได้อย่างสมบูรณ์แบบเพื่อให้การจัดรูปแบบตัวเอียงและตัวหนาง่าย ๆ

html email mailto

— gxg
แหล่งที่มา

1

มีสิ่งเดียวกันในใจและศึกษามาระยะหนึ่งแล้ว ฉันพยายามที่จะให้ <img> รีโมตแบบฝังลงในเนื้อหาของข้อความ คำสั่ง mailto จะต้องมีการเข้ารหัส URL เพื่อให้สามารถใช้งานได้ ผลลัพธ์ที่ได้จากธันเดอร์เบิร์ดก็คือเนื้อหา HTML นั้นปรากฏตามตัวอักษรพร้อมคำแนะนำ <img> และทั้งหมด ฉันเดาว่านี่เป็นปัญหาด้านความปลอดภัยในธันเดอร์เบิร์ดและไคลเอนต์อีเมลส่วนใหญ่ - พวกเขาแยกวิเคราะห์เมล - เนื้อหาขาเข้าเพื่อไม่ให้ทำสิ่งที่น่าสงสัย

— Hannes R.

4

สิ่งที่ดีที่สุดที่ฉันสามารถหาได้มาจากหน้านี้zaposphere.com/html-email-links-code .. ด้านล่างแสดงรายการ: "การปรับแต่งอื่น ๆ ที่ยอดเยี่ยมที่เว็บไซต์อื่น ๆ ส่วนใหญ่ไม่ได้พูดถึง !!" ช่วยฉันออกมามาก

— Stu Andrews

คุณสามารถตั้งค่าแต่ละส่วนของอีเมลด้วยข้อความพื้นฐาน เกี่ยวกับข้อ จำกัด ที่เป็นไปไม่ได้ที่การจัดรูปแบบ HTML นี่เป็นเครื่องมือที่ฉันสร้างขึ้นเพื่อทำการปรับแต่งฟิลด์ต่างๆใน mailto dead ง่าย ๆ : mailto.now.sh

— Dawson B

428

อย่างที่คุณเห็นในRFC 6068นี่เป็นไปไม่ได้เลย:

<hfname>"เนื้อหา" พิเศษระบุว่าสิ่งที่เกี่ยวข้อง<hfvalue> คือเนื้อหาของข้อความ ค่าฟิลด์ "เนื้อหา" มีวัตถุประสงค์เพื่อให้มีเนื้อหาสำหรับส่วนข้อความ / ส่วนแรกของข้อความ ฟิลด์ส่วนหัวหลอก "เนื้อหา" มีวัตถุประสงค์หลักเพื่อสร้างข้อความสั้น ๆ สำหรับการประมวลผลอัตโนมัติ (เช่นข้อความ "สมัครสมาชิก" สำหรับรายการส่งเมล) ไม่ใช่สำหรับเนื้อหา MIME ทั่วไป

— Alfonso Marin
แหล่งที่มา

4

@JoeBlow คำตอบยังคงถูกต้อง RFC 6068ซึ่งเลิกใช้แล้ว 2368 ยังคงบอกว่าเนื้อหานั้นเป็นข้อความธรรมดา

— Markus Laire

8

หากคุณผิดหวังกับคำตอบนี้โปรดอ่านต่อไป: stackoverflow.com/a/46699855/256272 (tl; dr .eml ไฟล์)

— Joe

95

ไม่ได้นี่เป็นไปไม่ได้เลย

— เควนติน
แหล่งที่มา

1

ไม่จริงอย่างเคร่งครัด ในขณะที่การสนับสนุนนั้นหายากมากคำตอบอื่น ๆ แสดงให้เห็นว่า HTML ที่ จำกัด บางอย่างนั้นเป็นไปได้ใน iOS และการรวมกันของ IE + ActiveX + Outlook (urgh, yuck)

— Simon East

89

ในขณะที่ไม่สามารถใช้ HTML เพื่อจัดรูปแบบเนื้อหาอีเมลของคุณคุณสามารถเพิ่มตัวแบ่งบรรทัดตามที่แนะนำไว้ก่อนหน้านี้

หากคุณสามารถใช้จาวาสคริปต์ได้ "encodeURIComponent ()" อาจมีการใช้งานดังต่อไปนี้ ...

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

— Oliver Pearmain
แหล่งที่มา

1

ไคลเอนต์อีเมลสามารถเรียกใช้ Javascript แบบฝังได้หรือไม่ OP บอกว่านี่คืออีเมลไม่ใช่เว็บเพจที่จะใช้ลิงค์ mailto:

— wide_eyed_pupil

ขอบคุณใน Rails คุณสามารถใช้raw("text \n more text \n\n\t")ฟังก์ชั่นเพื่อห่อหุ้มข้อความและแปลงให้เป็นตัวแบ่งบรรทัดและแท็บสำหรับเนื้อหาอีเมลได้

— FireDragon

สิ่งนี้ใช้ได้สำหรับฉันการส่งจาก Chrome "mailto" ไปยัง Outlook โปรดทราบว่าคุณต้องเข้ารหัสข้อความเท่านั้นไม่ใช่ทั้ง mailto string; และคุณไม่จำเป็นต้องเว้นวรรคก่อน / \nหลัง

— ลูกา

2

ฉันชอบวิธีนี้นี่คือ jsfiddle ที่จะเห็นมันในทางปฏิบัติ: jsfiddle.net/oligray/5uosngy4

— Oliver Grey

3

นอกจากนี้คุณยังสามารถใช้% 0A สำหรับการหยุดสายดังนั้นคุณไม่จำเป็นต้องทำจาก JavaScript

— Dirk Boer

58

ฉันใช้สิ่งนี้และดูเหมือนว่าจะทำงานกับ outlook ไม่ใช่การใช้ html แต่คุณสามารถจัดรูปแบบข้อความด้วยตัวแบ่งบรรทัดอย่างน้อยเมื่อเพิ่มเนื้อหาลงในเอาต์พุต

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

— แอนดี้
แหล่งที่มา

2

ดังนั้น "% 0D" จึงขึ้นบรรทัดใหม่ รหัสเทียบเท่าของแท็บที่เข้ารหัสคืออะไร

— wide_eyed_pupil

3

% 0D เป็นบรรทัดใหม่ซึ่งเป็น ctrl-m แท็บคือ ctrl-i ซึ่งคือ% 09 ลองดูที่แผนภูมิ ASCII เช่น [นี้asciitable.com/index/asciifull.gif] อักขระควบคุมอยู่ระหว่าง 1 ถึง 31 @wide_eyed_pupil

— Jim Bergman

2

ดูเหมือนว่าลายเซ็นใด ๆ จะถูกลบออกเมื่อทำเช่นนี้

— Valentin Despa

% 0A จะเป็น \ n

— Klemen Tušar

3

นั่นไม่ใช่ตัว HTML!

— Chloe

46

มันไม่ใช่สิ่งที่คุณต้องการ แต่เป็นไปได้ที่จะใช้จาวาสคริปต์ที่ทันสมัยเพื่อสร้างไฟล์ EML บนไคลเอนต์และสตรีมไปยังระบบไฟล์ของผู้ใช้ซึ่งควรเปิดอีเมล์ที่มี HTML ในโปรแกรมอีเมลเช่น Outlook:

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

นี่คือ 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>

จาวาสคริ

(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

ตอนนี้เป็นความคิดที่แปลกใหม่

— Greg

2

ความคิดที่ดี แต่สำหรับบันทึกใน Apple Mail ล่าสุดไฟล์นี้จะเปิดขึ้น แต่จะไม่สามารถแก้ไข / ส่งได้มันทำหน้าที่เหมือนบันทึกอีเมลที่ส่ง

— pmarreck

1

ด้วย Apple Mail (11.2) เมื่อคุณเปิดไฟล์. eml แล้วคุณสามารถเลือกข้อความ / ส่งอีกครั้งจากเมนู (shift-cmd-D) เพื่อให้อีเมลอยู่ในโหมดแก้ไข

— Jeff Collier

31

บางสิ่งเป็นไปได้ แต่ไม่ใช่ทั้งหมดให้พูดเช่นคุณต้องการให้ตัวแบ่งบรรทัดแทนที่จะ ใช้%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>

— สตีเฟ่นคอฟแมน
แหล่งที่มา

7

นั่นไม่ใช่ HTML ... ยังเป็นข้อความ

— แบรด

ไม่ใช่ถ้าคุณจัดรูปแบบอีเมลโดยใช้ $ mailheader = "ประเภทเนื้อหา: ข้อความ / html; charset = iso-8859-1 \ r \ n";

— Stephen Kaufman

12

@StephenKaufman - คุณไม่ใช่คนที่ส่งอีเมล แต่เป็นลูกค้าที่คลิกลิงก์ หมายความว่าคุณไม่รู้วิธีตั้งค่าไคลเอนต์อีเมล คุณไม่รู้ว่าตั้งค่าส่วนหัวอย่างไร สิ่งนี้จะทำงานกับไคลเอนต์อีเมลบางรายและไม่ทำงานกับคนอื่น

— Narxx

1

ขอบคุณนี่เป็นตัวเลือกที่ดีที่สุดอันดับสองสำหรับฉันถ้าฉันไม่สามารถทำ html ได้อย่างน้อยฉันก็สามารถคืนสินค้าได้ สบายดีโดยฉัน

— hamish

16

เป็นมูลค่าการชี้ให้เห็นว่าใน Safari บน iPhone, อย่างน้อย, ใส่แท็ก HTML พื้นฐานเช่น, และ<img>(ซึ่งนึกคิดคุณไม่ควรใช้ในกรณีอื่น ๆ อีกต่อไปแล้วพอใจ CSS) เข้าไปในร่างกายพารามิเตอร์ในmailto:ไม่ปรากฏว่า ทำงาน - พวกเขาได้รับเกียรติภายในไคลเอนต์อีเมล ฉันยังไม่ได้ทำการทดสอบอย่างละเอียดถี่ถ้วนเพื่อดูว่าสิ่งนี้ได้รับการสนับสนุนจากคอมโบมือถือหรือเดสก์ท็อปเบราว์เซอร์ / อีเมลไคลเอ็นต์อื่น ๆ หรือไม่ เป็นที่น่าสงสัยว่านี่เป็นไปตามมาตรฐานจริงหรือไม่ อาจมีประโยชน์หากคุณกำลังสร้างสำหรับแพลตฟอร์มนั้น

ดังที่คำตอบอื่น ๆ ได้ระบุไว้คุณควรใช้ encodeURIC คอมโพเนนต์ทั้งหมดก่อนที่จะฝังลงในmailto:ลิงก์

— Andrew Ferrier
แหล่งที่มา

ใช่มันทำงานได้อย่างสมบูรณ์เพื่อเพิ่มแท็กตัวหนาตัวเอียงที่เรียบง่าย - ใน iOS

— Fattie

ใน iOS ฉันไม่สามารถส่งอีเมลที่ถูกต้องด้วย <img src = 'mybase64' /> - ใน Gmail ฉันเห็น base64 ภายในข้อความของฉัน

— Vitaly Zdanevich

4

ธันเดอร์เบิร์ดรองรับ html-body :mailto:me@me.com?subject=Me&html-body=ME

— จางไป
แหล่งที่มา

0

ฉันมีปัญหาเดียวกันเกี่ยวกับการแบ่งปัน html ฉันทำงานด้านล่าง html สำหรับฉัน แทนที่ <ด้วย <&> ด้วย>

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

หมายเหตุ: ใช้งานได้เฉพาะใน Ubuntu เท่านั้น มันจะไม่ทำงานใน windows

— Rajan Kashiyani
แหล่งที่มา

-1

ทุกคนสามารถลองต่อไปนี้ (ฟังก์ชั่น mailto ยอมรับเฉพาะเท็กซ์เท็กซ์เท่านั้น แต่ที่นี่ฉันแสดงวิธีการใช้คุณสมบัติ Innertext HTML และวิธีเพิ่มจุดยึดเป็น mailto body params):

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

— Miguel Ballén
แหล่งที่มา

-3

เป็นไปได้ที่จะป้อนค่า unicode เพื่อแทรกบรรทัดใหม่ (เช่น:) \u0009แต่แท็ก HTML มีระดับการสนับสนุนที่แตกต่างกันและควรหลีกเลี่ยง

— Ryan Dunphy
แหล่งที่มา

-11

ฉันทำงานด้วยวิธีนี้:

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

ผลผลิตจะเป็น:

Hello
World

— Ravi Solanki
แหล่งที่มา