Web Share API 在移动端绝大多数现代安卓浏览器（Chrome、Edge、Samsung Internet）和 iOS Safari 16.4+ 均原生支持，但需满足 HTTPS 安全环境、用户手势触发及同源绝对 URL 三重条件；桌面端基本不支持（仅 PWA 模式下可用），且微信内置浏览器等 WebView 静默禁用。
Web Share API 在移动端是否可用
绝大多数现代安卓 Chrome、Edge、Samsung Internet 和 iOS Safari 16.4+ 都支持 navigator.share()，但桌面端基本不支持（Chrome 89+ 仅限 PWA 安装后），且必须在 HTTPS 环境下运行——HTTP 协议下调用会直接抛出 TypeError: navigator.share is not a function 或静默失败。
- 检查前先确认当前页面已部署在 HTTPS 上，且用户是在移动设备上访问
- iOS Safari 对
files参数完全忽略，只支持title、text、url - Android 上若未传
url，部分系统（如 MIUI）可能直接跳过分享菜单，只显示“复制链接”类选项
按钮点击后调用 share() 的最小可行代码
不能直接写 onclick="navigator.share(...)"，因为 Web Share API 要求调用必须发生在用户手势（如 click）的同步上下文中，异步延迟（哪怕 setTimeout）都会触发 DOMException: Permission denied。
- 绑定事件必须用
addEventListener，且 handler 内直接调用navigator.share() -
url必须是同源或合法跨域 URL（不能是 blob:// 或 data://） - 示例：
document.getElementById('share-btn').addEventListener('click', async () => { try { await navigator.share({ title: '这篇文章不错', text: '推荐你看这个', url: window.location.href }); } catch (err) { if (err.name !== 'AbortError') { console.warn('分享失败:', err); } } });
如何优雅降级处理不支持的情况
别用 typeof navigator.share === 'function' 就完事——iOS 16.4 之前、旧版 Android 浏览器返回 undefined，但某些 WebView（如微信内置）即使有该函数也实际不可用。更稳妥的是尝试调用并捕获拒绝错误。
- 捕获
AbortError表示用户取消，不是错误，无需提示 - 其他错误（如
NotAllowedError、TypeError）说明环境不支持，此时可 fallback 到复制链接 + 提示：“已复制链接，可粘贴分享” - 避免在降级逻辑里再调用
document.execCommand('copy')（已废弃），改用navigator.clipboard.writeText()并处理权限拒绝
为什么分享按钮点不动或没反应
常见卡点不是代码写错，而是环境或参数踩坑：
立即学习“前端免费学习笔记（深入）”；
- 本地开发用
file://协议？→ 必须起本地服务（如python3 -m http.server或 Vite 的npm run dev） - 按钮被
pointer-events: none或父层z-index遮挡？真机调试时容易忽略 CSS 层叠问题 - 传了空字符串
text: ''或url: ''？某些系统（特别是 Samsung）会直接拒掉整个请求，不弹菜单 - 在 iframe 里调用？除非 iframe 带
allow="web-share"属性，否则会被浏览器拦截
最麻烦的其实是微信 iOS：它用的是旧版 WKWebView，navigator.share 存在但不可用，且不抛错，只是静默失败——只能靠 UA 检测 + 强制 fallback。
