IT

HTML 본문과의 mailto 링크

lottoking 2020. 3. 18. 23:16
반응형

HTML 본문과의 mailto 링크

mailtoHTML 문서에 몇 개의 링크가 있습니다.

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

mailto:부분에 HTML 형식의 본문을 삽입 할 수 있습니까 href?

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

iOS의 (2016)에서 간단한 이탤릭체로 대담한 서식 을 추가 <i>하고 <b>태그 를 추가하는 것이 좋습니다.

RFC 6068 에서 볼 수 있듯이 전혀 불가능합니다.

특수한 <hfname>"본문"은 연관된 <hfvalue>본문이 메시지의 본문 임을 나타냅니다 . "body"필드 값은 메시지의 첫 번째 텍스트 / 일반 본문 부분에 대한 내용을 포함합니다. "본문"의사 ​​헤더 필드는 주로 일반 MIME 본문이 아닌 자동 처리를위한 짧은 텍스트 메시지 (메일 링리스트의 "구독"메시지)를 생성하기위한 것입니다.

아니요. 전혀 불가능합니다.

이메일 본문을 형식화하기 위해 HTML을 사용할 수는 없지만 이전에 제안한대로 줄 바꿈을 추가 할 수 있습니다.

자바 스크립트를 사용할 수 있다면 "encodeURIComponent ()"는 다음과 같이 사용될 수 있습니다 ...

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

나는 이것을 사용했고 HTML을 사용하지 않고 전망과 함께 작동하는 것처럼 보이지만 적어도 본문이 출력으로 추가 될 때 줄 바꿈으로 텍스트의 서식을 지정할 수 있습니다.

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

그것은 당신이 원하는 것이 아니지만, 현대 자바 스크립트를 사용하여 클라이언트에서 EML 파일을 만들고 사용자의 파일 시스템으로 스트리밍 할 수 있습니다.이 파일은 Outlook과 같은 메일 프로그램에서 HTML이 포함 된 풍부한 전자 메일을 열어야합니다.

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);
})();

일부는 가능하지만 전부는 아닙니다. 예를 들어 <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>

적어도 iPhone의 Safari <b>에서는 <i>, 및 <img>( 기본적 으로 더 이상 다른 환경에서는 CSS를 선호하지 않아야 함) 와 같은 기본 HTML 태그를 body 매개 변수에 삽입하면 다음과 같이 mailto:나타납니다. 작업-이메일 클라이언트 내에서 영광입니다. 다른 모바일 또는 데스크탑 브라우저 / 이메일 클라이언트 콤보에서 지원되는지 확인하기 위해 철저한 테스트를 수행하지 않았습니다. 이것이 실제로 표준을 준수하는지 여부도 모호합니다. 그래도 해당 플랫폼을 구축하는 경우 유용 할 수 있습니다.

다른 응답에서 언급했듯이 mailto:링크에 포함하기 전에 전체 본문에서 encodeURIComponent를 사용해야 합니다.

썬더 버드 지원 html-body :mailto:me@me.com?subject=Me&html-body=<b>ME</b>

누구나 다음을 시도 할 수 있습니다 (mailto 함수는 일반 텍스트 만 허용하지만 여기에서는 HTML innertext 속성을 사용하는 방법과 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

개행 (예 :)을 삽입하기 위해 유니 코드 값을 입력 할 수 \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'

시도 할 다른 경로가 있습니다. 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>

참고 URL : https://stackoverflow.com/questions/5620324/mailto-link-with-html-body

반응형

'IT' 카테고리의 다른 글

멀티 모듈 Maven 프로젝트에서 모듈의 버전 번호 업데이트  (0) 2020.03.18
스칼라의 적용 기능은 무엇입니까?  (0) 2020.03.18
PostgreSQL에서 소개 한 JSONB에 대한 설명  (0) 2020.03.18
배열 IE8에서 indexOf가 작동하지 않는 이유는 무엇입니까?  (0) 2020.03.18
브라우저 / 탭이 활성화되어 있는지 확인하는 방법  (0) 2020.03.08

'IT'의 다른글

  • 현재글HTML 본문과의 mailto 링크

관련글

댓글

티스토리툴바