HTML5 词条目录
前端Wiki/词条/Web Share 分享

Web Share 分享

定义调起系统原生分享面板,把链接、文本或文件分享到其他应用

navigator.share({ title, text, url, files }) 会唤起移动端系统级的分享底栏或桌面端的分享目标选择,用户直接把内容发到微信、微博、邮件,无需网页自己接入各家 SDK。它必须在用户手势中调用(点击),且只在安全上下文(HTTPS)可用。

files 字段可以分享图片等文件,但要先用 navigator.canShare({ files }) 能力探测。不支持时降级为复制链接或展示自己的分享二维码浮层。这个 API 在移动浏览器支持最好,桌面端较弱;分享回调是 Promise,可以感知用户是否真的完成分享。

JavaScript
function sharePage() {
  if (!navigator.share) {
    console.log('当前环境不支持原生分享,降级为复制链接');
    return;
  }
  navigator.share({
    title: '这篇前端词条写得真好',
    text: '推荐一个前端知识库',
    url: location.href
  }).then(function () {
    console.log('分享完成');
  }).catch(function (err) {
    console.log('分享取消或失败:', err.message);
  });
}
// 绑定到按钮:button.addEventListener('click', sharePage);
⚠ 常见误区
🔗 相关词条浏览器组件
← 返回来源章节浏览器