前端篇-mailto
前端无法达到点击一个按钮直接发送邮件到指定收件人的效果,可以一用的只有mailto。
mailto能做到什么效果
调用本地的邮件客户端(如Outlook、foxmail),预先输入收件人、抄送、標題、正文內容等。
mailto怎么使用
一般有两种用法,form表单和a标签。
1.form表单
<form action="mailto:xx@xx.com" enctype="text/plain"> <input name="subject" type="text"> <input name="cc" type="text"> <textarea name="body"></textarea> <input type="submit" value="提交"> </form>
name对应标题、抄送、正文等,需要注意的是enctype一定要设置为text/plain。
然而表单提交的内容不能修改样式,实在不推荐这种方式。
2.a标签
还是a标签比较舒服。
<a href="mailto:xx@xx.com">mail</a>
以上是一个简单的,仅设置了收件人的mailto链接,如果有多个收件人直接用逗号隔开即可,下面说一下怎么设置其他内容:
类似get方式的url,mailto:xx@xx.com加?,之后以key=value的形式以&连接,添加内容即可。
可添加的内容有:
subject :标题
cc :抄送
bcc :密送
body :正文内容
注意特殊字符(如空格)需要转码,下面是一个示例
<a href="mailto:xx@xx.com,xx2@xx.com?subject=标题&cc=xx3@xx.com&bcc=xx4@xx.com&body=内容%20中间有空格"></a>
如果你甚至不想使用任何标签,也可以直接用js拼接好url,赋值给window.location即可
var mailTo = "xx@xx.com", subject = "标题", body = "内容"; var url = "mailto:"+encodeURIComponent(mailTo)+"?subject="+encodeURIComponent(subject)+"&body="+encodeURIComponent(body); window.location = url;
一些可能遇到的问题
1.body的内容是否可以使用html代码?
取决于邮件客户端,比如Outlook就不会解析html标签,只会原样显示,但是foxmail就可以以html形式显示。
2.中文变成乱码
依然是邮件客户端的原因,js使用encodeURIComponent只能编码为UTF-8,然而一般的邮件客户端默认编码都是gb2312
outlook可以在文件-设置-高级中勾选,对mailto:协议启用UTF-8支持
foxmail可以直接在邮件页面右键(或者右上角设置内)设置编码为UTF-8