前端javascript如何分享内容到twitter和Email

article/2025/11/7 21:06:44

接着上篇讲,上篇讲了如何分享到facebook,这篇我们讲一下如何分享到twitter和Email,首先分享到twitter和Email不像分享到facebook一样可以有回调,这两分享是没有回调的,分享成功失败,也不知道,但是会触发事件.

我们先来看下分享到twitter,首先引入twitter的sdk文件,如下图所示:

 window.twttr = (function (d, s, id) { // 引入sdkvar t, js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s);js.id = id;js.src = "https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js, fjs);return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });}(document, "script", "twitter-wjs"));try {twttr.ready(function (twttr) {   // 注册事件twttr.events.bind('tweet', function (event) {// your callback action here...console.log('callback')});});} catch (err) {new Error('twttr fail to load')}// 分享事件开始$('.share_tweet').on('click', function() {var text = '8%E6%9C%8817%E6%'  // 携带文本需要通过url转码,如果不是标准转码可能会导致分享内容乱码(像中文、日文这种文本)$(this).parent().attr('target', '_blank');$(this).parent().attr('href', 'https://twitter.com/share?text='+ text +'&url=https://www.xxx.jp');})

效果图如下所示
在这里插入图片描述
2.Javascript如何将内容分享到Email呢?我们知道分享到facebook或者twitter是将分享的内容通过a标签href属性带出去的,跳转到三方网站接收到URL的参数就会生成相对应的内容,其实分享到Email也是通过href的属性去调取底层的api接口实现的,href的参数上带上mailto就可以调取邮件客户端,具体可携带的参数总共mailto,cc,bcc,subject,body五个,有些客户端支持自定义的属性,有些客户端会过滤掉自定义的属性;代码如下图所示:

// html
<a class='my-href'>click</a>
// js
var email_url = ''; // 后端返回的需要动态添加邮件文本内容
var email_content  = ''; // 后端返回的静态内容
var email_context = ''; // 邮件须发送的文本
email_context = email_content + encodeURIComponent(email_url); // 通过url调取需要进行url转码,不然通过url解码之后会乱码
$('.my-href'').attr('href', 'mailto:?body=' + email_context);