navigator.share 仅支持 chromium 内核浏览器（chrome 76+、edge 79+、samsung internet 12.2+）和 ios/ipados safari 16.4+；firefox、旧版 safari 及桌面 safari 不支持，且须 https/localhost 安全上下文。
navigator.share 在哪些浏览器里能用
只有 Chromium 内核的现代浏览器（Chrome 76+、Edge 79+、Samsung Internet 12.2+）和 Safari 16.4+（仅 iOS/iPadOS）支持 navigator.share。Firefox 和旧版 Safari 完全不支持，调用会直接抛出 TypeError: navigator.share is not a function 错误。
必须在安全上下文（https:// 或 localhost）中运行，HTTP 站点下会静默失败或拒绝调用。
移动端优先：桌面端 Chrome 虽支持但默认禁用，需手动开启 chrome://flags/#web-share 并重启；Safari 桌面版至今不支持。
分享标题、URL 和文本的正确参数写法
navigator.share 只接受一个对象参数，字段名固定为 title、text、url —— 注意没有 description 或 body，多传会被忽略。
URL 必须是绝对地址（如 https://example.com/article?id=123），相对路径或仅域名会触发 AbortError；title 和 text 是可选的，但至少提供其中一项，否则报 NotAllowedError。
实操建议：
- 先用
if ('share' in navigator)检测能力，再调用 - URL 建议用
encodeURIComponent处理特殊字符（尤其含中文或 query 参数时） - 避免把长文本塞进
title字段——iOS Safari 对title长度敏感，超 50 字可能截断或分享失败 - 如果只需分享链接，
text可留空；若想带摘要，优先放text，title作为补充（如文章标题）
示例：
if ('share' in navigator) {
navigator.share({
title: '如何用 navigator.share 分享',
text: '一篇讲清兼容性和参数细节的实操笔记',
url: 'https://example.com/share-guide'
}).catch(err => console.error('分享失败:', err));
}
常见报错与对应修复方式
用户点击后无反应或控制台报错，大概率是以下几种情况之一：
-
TypeError: navigator.share is not a function→ 浏览器不支持，降级到复制链接或跳转系统邮件/短信 -
AbortError→ 用户主动取消，或页面未聚焦（比如从 iframe 或 background tab 触发）、URL 不合法 -
NotAllowedError→ 缺少title或text，或不在用户手势（如click）回调中调用（不能放在setTimeout或异步请求完成后） - 分享面板打开但内容为空 → 检查
url是否为绝对路径，title/text是否为字符串类型（数字或 null 会导致静默丢弃）
替代方案要提前准备，别等分享失败才补
不能假设 navigator.share 总可用。真实场景中，约 30% 的访问设备（旧安卓 WebView、微信内置浏览器、部分国内定制 ROM）会 fallback 到降级逻辑。
推荐组合策略：
- 有
navigator.share：直接调用 - 无
navigator.share但有document.execCommand('copy')：复制 URL 到剪贴板（注意权限提示） - 都不行：生成带预设内容的分享链接（如
https://twitter.com/intent/tweet?url=...&text=...），用window.open打开
微信内嵌浏览器是个特例：它屏蔽了所有系统分享 API，但支持 WeixinJSBridge（需 JS-SDK 配置），这个得单独适配，不能指望 navigator.share。
真正容易被忽略的是：分享行为必须由用户明确触发（click/tap），且不能跨 tick 延迟执行。哪怕加个 await new Promise(r => setTimeout(r, 0))，也会导致 NotAllowedError。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
