前端分享 || facebook，linkedin，twitter，浏览器自带

最新推荐文章于 2024-07-13 11:26:48 发布

hao555666

最新推荐文章于 2024-07-13 11:26:48 发布

阅读量1.1k

点赞数

分类专栏：笔记文章标签： html5

本文链接：https://blog.csdn.net/hao555666/article/details/127751559

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

// facebook，linkedin，twitter分享

let obj = {
  href: "http://www.facebook.com/sharer.php?u=" + encodeURIComponent(window.location.href),
  target: "_blank",
  specs: "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350"
};
switch (value) {
  case "facebook":
    obj.href = "http://www.facebook.com/sharer.php?u=" + encodeURIComponent(window.location.href);
    break;
  case "linkedin":
    obj.href = "http://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(window.location.href);
    break;
  case "twitter":
    obj.href = "https://twitter.com/intent/tweet?text=&url=" + encodeURIComponent(window.location.href);
    break;
  default:
    break;
}
window.open(obj.href, obj.target, obj.specs);

还需要以下的内容在<head></head>里边加（时间久了有点忘了需要重新试下）

<meta property="og:url" content="分享链接的url" />
<meta property="og:description" content="分享的description" />
<meta property="og:image" content="分享图片的url" />
<meta property="og:title" content="分享内容的title" />

浏览器自带的分享

let title = document.querySelector("title") ? document.querySelector("title").innerText : "";
    let text = document.querySelector('meta[name="description"]') ? document.querySelector('meta[name="description"]').getAttribute("content") : "";
    let url = window.location.href;
    if (navigator.share) {
      navigator
        .share({
          title: title,
          text: text,
          url: url
        })
        .then(() => {})
        .catch(console.error);
    }

浏览器自带的分享适配

Navigator.share - Web API 接口参考 | MDN (mozilla.org)