navigator.share在Chrome for Android、Edge for Android、Samsung Internet及iOS Safari 16.4+(仅PWA standalone模式)中可用;桌面端基本不可用。

navigator.share 在哪些浏览器里能用
它只在支持 Web Share API 的现代移动浏览器中可用,比如 Chrome for Android、Edge for Android、Samsung Internet;iOS Safari 从 16.4 开始支持,但仅限于 PWA 安装后且运行在 standalone 模式下。桌面端基本不可用(Chrome 桌面版虽有实验性支持,但默认禁用且行为不稳定)。
判断是否可用,直接查 navigator.share 是否为函数:
if (typeof navigator.share === 'function') {
// 可以调用
} else {
// 需要降级方案,比如复制链接 + 弹出提示
}
调用 navigator.share 必须满足的条件
这个 API 是受保护的,不满足以下任一条件就会直接抛错:NotAllowedError 或静默失败:
- 必须由用户手势触发(例如
click、tap事件,不能在setTimeout或fetch回调里直接调) - 页面必须是安全上下文(即通过 HTTPS 提供,localhost 也允许)
- 不能在 iframe 中调用(除非 iframe 显式声明
allow="web-share",且父页面也满足上述条件)
常见翻车点:在 useEffect 里自动调、在 onLoad 后延时调、或绑在非冒泡事件(如 mouseenter)上——这些都会被拒绝。
share() 接收的参数格式和限制
navigator.share() 只接受一个对象,字段有限且有严格长度限制:
-
title:字符串,建议 ≤ 50 字符;过长可能被截断或忽略(尤其在微信、QQ 等第三方分享面板中) -
text:纯文本描述,≤ 2000 字符;注意它不会自动换行,需手动加\n -
url:必须是当前页面同源的绝对 URL(不能是相对路径、不能跨域);传错会报TypeError: Failed to execute 'share' on 'Navigator': url must be same-origin
不支持图片、文件、自定义图标等;想发图只能靠服务端生成带图的分享页再传 url。
示例正确调用:
await navigator.share({
title: '一篇讲透 Web Share API',
text: '前端同学常踩的坑都在这儿了。\n推荐收藏。',
url: window.location.href
});
如何优雅降级到复制链接 + 手动分享
当 navigator.share 不可用或调用失败时,最务实的做法是把链接复制到剪贴板,再引导用户粘贴到社交 App 中:
- 用
navigator.clipboard.writeText()复制window.location.href(注意它也要求用户手势) - 复制成功后,可弹个轻量提示(比如 toast),别用
alert打断操作流 - 避免伪造“已分享”状态——用户没真发出去,就别改按钮文字或加 checkmark
特别提醒:iOS Safari 在非 standalone 模式下即使检测到 navigator.share 存在,调用也会失败,所以降级逻辑一定要覆盖 try/catch 中的 AbortError 和 NotAllowedError。

















