天天看點

mailto scheme 進階用法, 顯示帶html樣式的郵件文本

需求:

今天同僚問我一個需求,就是如果用html的mailto scheme,能否當其點選後彈出的outlook中,其内容正文部分是一個帶有html的樣式或格式的?

我們檢查了一下很多文章,包括RFC6068(http://tools.ietf.org/html/rfc6068),還有StackOverflow的相關文章(http://stackoverflow.com/questions/5620324/mailto-with-html-body) ,都表明這個是不可能實作的。

真是這樣的麼?因為10年前當剛接觸到ActiveX控件時候,講到ActiveX控件的強大之處甚至可以操作系統資料庫,那麼它應該也能對于在系統資料庫中注冊的郵件用戶端應用做一些進階功能的定制吧,然後我很輕易就實踐出來了。

實踐:

我們很簡單,先建立一個html頁面,上面有一個超級連結'Share this link",當點選這個連結時候,會打開Outlook的用戶端然後把一些相關的内容填寫進去,特别是郵件正文部分必須有樣式(比如就簡單設定下文字顔色)

附上代碼:

我們先寫一段js:

<script language="javascript" type="text/javascript">
/*
*  Demo:使用mailto scheme 發送帶有html樣式的内容作為郵件内容
*/
function SendMail(subject,toName, ccName, bccName ) {
//以下2行複制自:http://msdn.microsoft.com/en-us/library/office/aa210897(v=office.11).aspx
//建立一個ActiveX控件對象讓其對應Outlook應用
var outlookApp = new ActiveXObject("Outlook.Application");
//MAPI是“消息傳遞應用程式接口”,如果雙方應用程式都啟用“MAPI”,就可以互相共享郵件資訊
var nameSpace = outlookApp.getNameSpace("MAPI");
//開始構造outlook的郵件項
var mailItem = outlookApp.CreateItem(0);
//設定郵件主題
mailItem.Subject = subject;
//設定郵件to清單
mailItem.To = toName;
//設定郵件cc清單
mailItem.Cc=  ccName;
//設定郵件的bcc清單
mailItem.Bcc=bccName;
//這裡特别注意了,這裡的mailBody是一個可以帶html樣式的body
var mailBody= "<html><body><font color='red'>This is the email body with html style</font></body></html>";
//設定郵件的内容為html内容
mailItem.HTMLBody = mailBody;
//顯示郵件
mailItem.Display(0);
//重置資源
mailItem = null;
nameSpace = null;
outlookApp = null;
}
</script>      

然後頁面上調用我們的這個方法來用mailto sheme:

mailto scheme 進階用法, 顯示帶html樣式的郵件文本

測試:

假設這個頁面叫testmailto.html ,當我們要在IE浏覽器中測試它的時候的時候,首先必須讓浏覽器啟用ActiveX控件的支援:

mailto scheme 進階用法, 顯示帶html樣式的郵件文本
mailto scheme 進階用法, 顯示帶html樣式的郵件文本

之後,它會出現這個超級連結Share this link。如果點選它,則會顯示如下,提醒你ActiveX控件因為太強大而可能不安全,問你是否允許互動:

mailto scheme 進階用法, 顯示帶html樣式的郵件文本

選擇"Yes"後,可以發現Outlook用戶端被打開,除了填寫上去的一般資訊(Subject,to,cc,bcc)以外,最重要的是, body 部分不再是素文本,而是帶有樣式的文本。

mailto scheme 進階用法, 顯示帶html樣式的郵件文本

這正是我們所需要的。

結論:

是以直接用mailto scheme,是不可能建立帶有樣式文本的郵件内容的的,但是我們可以用 ActiveX控件輕易的擊穿它,但是因為ActiveX隻有IE支援,而且帶有安全隐患。

比如在Firefox中運作相同的例子,則會報以下的錯誤: