html 弹出一个邮件连接,mailto scheme 高级用法, 显示带html样式的邮件文本

这篇博客介绍了如何利用ActiveX控件在IE浏览器中通过HTML的mailtoscheme创建带有HTML样式的邮件内容。虽然直接的mailtoscheme不支持样式,但通过ActiveX可以实现这一功能,不过这种方法仅限于IE且存在安全风险。在Firefox等其他浏览器中,该方法无法正常工作,因此提出了继续研究其他浏览器解决方案的需求。
摘要由CSDN通过智能技术生成

需求:

今天同事问我一个需求,就是如果用html的mailto scheme,能否当其点击后弹出的outlook中,其内容正文部分是一个带有html的样式或格式的?

真是这样的么?因为10年前当刚接触到ActiveX控件时候,讲到ActiveX控件的强大之处甚至可以操作注册表,那么它应该也能对于在注册表中注册的邮件客户端应用做一些高级功能的定制吧,然后我很轻易就实践出来了。

实践:

我们很简单,先创建一个html页面,上面有一个超级链接'Share this link",当点击这个链接时候,会打开Outlook的客户端然后把一些相关的内容填写进去,特别是邮件正文部分必须有样式(比如就简单设置下文字颜色)

附上代码:

我们先写一段js:

/*

* 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= "

This is the email body with html style";

//设置邮件的内容为html内容

mailItem.HTMLBody = mailBody;

//显示邮件

mailItem.Display(0);

//重置资源

mailItem = null;

nameSpace = null;

outlookApp = null;

}

然后页面上调用我们的这个方法来用mailto sheme:

c214f7baf5ee30316c7af07822fff715.png

测试:

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

ea459109ba96e8babd7011f2fdacf898.png

c5173adf098f66c80a284d3dcd0e4a1a.png

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

9606bad9b63f82dc8c46b8316c2e3f85.png

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

244983ea3caee4172d57d87c6ccf3460.png

这正是我们所需要的。

结论:

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

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

9e6f54e6833c8aab79571d7c32d7341d.png

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一种可能的解决方案: 1. 使用querySelectorAll()方法获取所有需要重新排序的DOM节点,存储在一个数组中 ```javascript let nodes = Array.from(document.querySelectorAll('li')); ``` 2. 根据每个节点的textContent属性,创建一个字符串数组,并按字母顺序排序 ```javascript let textArray = nodes.map(node => node.textContent); textArray.sort(); ``` 3. 使用文档片段(document fragment)创建一个临时的DOM节点容器,将排好序的字符串数组中的每个元素转换为一个DOM节点,并将它们添加到文档片段中 ```javascript let fragment = document.createDocumentFragment(); textArray.forEach(text => { let node = document.createElement('li'); node.textContent = text; fragment.appendChild(node); }); ``` 4. 将文档片段中的节点替换原先的节点 ```javascript nodes.forEach((node, index) => { node.parentNode.replaceChild(fragment.childNodes[index], node); }); ``` 完整代码示例: ```html <ul> <li>JavaScript</li> <li>Scheme</li> <li>Python</li> <li>Haskell</li> <li>Ruby</li> </ul> ``` ```javascript let nodes = Array.from(document.querySelectorAll('li')); let textArray = nodes.map(node => node.textContent); textArray.sort(); let fragment = document.createDocumentFragment(); textArray.forEach(text => { let node = document.createElement('li'); node.textContent = text; fragment.appendChild(node); }); nodes.forEach((node, index) => { node.parentNode.replaceChild(fragment.childNodes[index], node); }); ``` 输出结果: ```html <ul> <li>Haskell</li> <li>JavaScript</li> <li>Python</li> <li>Ruby</li> <li>Scheme</li> </ul> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值