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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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:

094829645.png


测试:


假设这个页面叫testmailto.html ,当我们要在IE浏览器中测试它的时候的时候,首先必须让浏览器启用ActiveX控件的支持:

144431506.png

144532626.png


之后,它会出现这个超级链接Share this link。如果点击它,则会显示如下,提醒你ActiveX控件因为太强大而可能不安全,问你是否允许交互:

144717521.png

选择"Yes"后,可以发现Outlook客户端被打开,除了填写上去的一般信息(Subject,to,cc,bcc)以外,最重要的是, body 部分不再是素文本,而是带有样式的文本。


144830444.png

这正是我们所需要的。



结论:

所以直接用mailto scheme,是不可能创建带有样式文本的邮件内容的的,但是我们可以用 ActiveX控件轻易的击穿它,但是因为ActiveX只有IE支持,而且带有安全隐患。

比如在Firefox中运行相同的例子,则会报以下的错误:

145611994.png

所以我还得继续研究,看下别的浏览器如何去实现这个相同的需求。





本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/1335395,如需转载请自行联系原作者
目录
打赏
0
0
0
0
235
分享
相关文章
HTML 框架高阶用法
HTML框架,或前端框架,如Bootstrap、Vue.js等,显著提升了Web应用开发的速度与用户体验。本文介绍了一些高级技巧,如自定义样式与组件、响应式设计实践、JavaScript功能增强及性能优化策略等,帮助开发者更好地利用这些工具,实现高效开发并提升应用性能与灵活性。
HTML(HyperText Markup Language,超文本标记语言)
HTML(HyperText Markup Language,超文本标记语言)
144 11
|
5月前
html基本用法
HTML(超文本标记语言)是用于创建网页的标记语言。它通过标签定义文档结构,如文档类型、根元素、元数据和内容。常用标签包括段落、图像、分区、文本格式化、超链接和列表等。例如,使用 `&lt;p&gt;` 标签创建段落,`&lt;img&gt;` 插入图像,`&lt;a&gt;` 创建链接,`&lt;ul&gt;` 和 `&lt;ol&gt;` 分别创建无序和有序列表。
90 16
|
6月前
|
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件,包括写入大文本和HTML代码,并分析了几种常用的Java PDF导出工具。
1230 0
spring boot 整合 itextpdf 导出 PDF,写入大文本,写入HTML代码,分析当下导出PDF的几个工具
如何解析一个 HTML 文本
【10月更文挑战第23天】在实际应用中,根据具体的需求和场景,我们可以灵活选择解析方法,并结合其他相关技术来实现高效、准确的 HTML 解析。随着网页技术的不断发展,解析 HTML 文本的方法也在不断更新和完善,
|
7月前
Twaver-HTML5基础学习(32)Network样式andTree样式
本文介绍了如何在Twaver-HTML5中自定义Network和Tree组件的样式,包括标签、提示、颜色、告警等。
66 2
Twaver-HTML5基础学习(32)Network样式andTree样式
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
Python技巧:将HTML实体代码转换为文本的方法
在选择方法时,考虑到实际的应用场景和需求是很重要的。通常,使用标准库的 `html`模块就足以满足大多数基本需求。对于复杂的HTML文档处理,则可能需要 `BeautifulSoup`。而在特殊场合,或者为了最大限度的控制和定制化,可以考虑正则表达式。
357 12
下一篇
oss创建bucket
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等