JavaScript 浏览器 Web Share API 实现分享内容怎么做-js教程-PHP中文网

web share api 是浏览器原生分享功能，需 https/localhost 安全上下文且用户手势触发；支持 chrome 61+、edge 79+、safari 16.4+、firefox 125+，但 safari 不支持 files 字段；须用 'share' in navigator 检测并降级，url 需同源或合法绝对路径。

web share api 是浏览器原生支持的分享功能，能让网页轻松调用系统级分享面板（如微信、短信、邮件、微博等），但需满足安全上下文（https 或 localhost）且用户主动触发（如点击按钮）。

基础使用条件和限制

必须在安全上下文（HTTPS 或 localhost）下运行；调用必须由用户手势（如 click、tap）触发；不支持服务端渲染或自动执行；目前主流浏览器（Chrome 61+、Edge 79+、Safari 16.4+、Firefox 125+）已支持，但 Safari 对 files 字段暂不支持。

分享文本、链接和标题

最常用的是分享纯内容，只需传入 { title, text, url } 对象：

示例代码：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

document.getElementById('shareBtn').addEventListener('click', async () => {
  try {
    await navigator.share({
      title: '一篇文章的标题',
      text: '这是我想分享的一段简介',
      url: 'https://example.com/article'
    });
    console.log('分享成功');
  } catch (err) {
    console.log('分享被取消或不支持：', err.message);
  }
});

判断 API 是否可用并优雅降级

不是所有浏览器都支持，推荐先检测再启用按钮：

用 'share' in navigator 判断是否支持
不支持时显示备用方案（如复制链接、跳转社交平台）
可结合 navigator.canShare() 预检参数合法性（例如 URL 格式是否有效）

检测示例：

const shareBtn = document.getElementById('shareBtn');
if ('share' in navigator) {
  shareBtn.style.display = 'inline-block';
  shareBtn.addEventListener('click', handleShare);
} else {
  shareBtn.style.display = 'none';
  document.getElementById('fallbackCopy').style.display = 'inline-block';
}