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

最新推荐文章于 2025-10-07 06:28:53 发布

原创最新推荐文章于 2025-10-07 06:28:53 发布 · 3.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #twitter

前端专栏收录该内容

19 篇文章

订阅专栏

本文接着上篇，介绍了内容分享到特定平台的方法。分享到某些平台无回调，但会触发事件。分享到特定平台可通过标签属性带内容，利用属性调取底层 API 接口，如在参数上带特定内容可调用邮件客户端，还给出了可携带参数及参考博文地址。

部署运行你感兴趣的模型镜像

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

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

 window.twttr = (function (d, s, id) { // 引入sdk
       var 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);