如何使用Web Share API分享完整博客文章内容及对应链接

基于Web Share API的修正实现 #

你要实现「博文内容+链接」的分享效果，直接把博文完整内容/摘要填入shareData的text字段，博文链接填入url字段即可，绝大多数系统的分享面板会自动拼接两个字段的内容展示，不需要手动拼接。

你原有代码存在三个问题：

• shareData的三个字段均为空，没有填充实际内容
• catch回调的箭头函数语法错误，缺少>符号
• 没有做兼容性判断，不支持Web Share API的浏览器会直接报错

修正后的可运行代码如下：

<script>
// 按需修改选择器获取对应博文内容
const blogTitle = document.querySelector('h1').textContent;
// 如需分享全文，替换选择器为你的博文正文容器选择器即可
const blogContent = document.querySelector('.article-content').textContent.trim();
const blogUrl = window.location.href;

let shareData = {
  title: blogTitle,
  text: blogContent,
  url: blogUrl
}
const btn = document.querySelector('#share');
const resultPara = document.querySelector('.result');

btn.addEventListener('click', async () => {
  // 先判断浏览器是否支持Web Share API
  if (!navigator.share) {
    // 不支持时走降级逻辑：拼接内容+链接复制到剪贴板
    const copyText = `${blogTitle}\n${blogContent}\n查看原文：${blogUrl}`;
    await navigator.clipboard.writeText(copyText);
    resultPara.textContent = '内容已复制到剪贴板，可手动分享';
    return;
  }
  try {
    await navigator.share(shareData);
    resultPara.textContent = '分享成功';
  } catch (e) {
    resultPara.textContent = '分享失败：' + e.message;
  }
});
</script>

注意事项 #

• Web Share API仅支持HTTPS环境（本地localhost开发不受限），且必须由用户主动交互（比如点击事件）触发，不能自动调用
• 不同操作系统对text字段的长度限制不同，如果是超长博文建议只放摘要，避免内容被截断
• 部分社交平台会优先读取链接对应的OGP信息生成分享卡片，可提前给页面配置OGP标签，优化分享展示效果

内容的提问来源于stack exchange，提问作者Vamsikrishna K