当前位置：首页 > JavaScript

js 实现网页分享

2026-02-03 03:45:43JavaScript

实现网页分享功能

在JavaScript中实现网页分享功能可以通过Web Share API或自定义分享按钮完成。Web Share API是现代浏览器提供的原生接口，允许调用设备系统的分享功能。

使用Web Share API

Web Share API简单易用，但需注意浏览器兼容性（主要支持Chrome、Edge、Safari等移动端和部分桌面端）。

if (navigator.share) {
  navigator.share({
    title: '网页标题',
    text: '分享内容描述',
    url: 'https://example.com',
  })
  .catch(error => console.log('分享失败:', error));
} else {
  console.log('当前浏览器不支持Web Share API');
}

自定义分享按钮

对于不支持Web Share API的浏览器，可手动实现主流平台的分享链接：

function shareToPlatform(platform) {
  const url = encodeURIComponent(window.location.href);
  const title = encodeURIComponent(document.title);

  let shareUrl;
  switch(platform) {
    case 'twitter':
      shareUrl = `https://twitter.com/intent/tweet?text=${title}&url=${url}`;
      break;
    case 'facebook':
      shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
      break;
    case 'linkedin':
      shareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${title}`;
      break;
    case 'whatsapp':
      shareUrl = `https://wa.me/?text=${title} ${url}`;
      break;
    default:
      return;
  }
  window.open(shareUrl, '_blank', 'width=600,height=400');
}

复制链接功能

添加复制链接到剪贴板的功能可提升用户体验：

js 实现网页分享

function copyToClipboard() {
  const url = window.location.href;
  navigator.clipboard.writeText(url)
    .then(() => alert('链接已复制!'))
    .catch(err => console.error('复制失败:', err));
}

注意事项

Web Share API要求网站通过HTTPS提供服务
某些浏览器可能仅在用户触发事件（如点击）时才允许调用navigator.share
自定义分享链接需要处理各平台的URL参数格式差异
移动端适配时建议使用响应式设计布局分享按钮

完整示例实现

<button onclick="nativeShare()">原生分享</button>
<button onclick="shareToPlatform('twitter')">分享到Twitter</button>
<button onclick="shareToPlatform('facebook')">分享到Facebook</button>
<button onclick="copyToClipboard()">复制链接</button>

<script>
function nativeShare() {
  if (navigator.share) {
    navigator.share({
      title: document.title,
      text: '看看这个有趣的网页',
      url: window.location.href,
    });
  } else {
    alert('您的浏览器不支持原生分享，请使用其他分享方式');
  }
}

// 其他函数实现同上
</script>