web share api 在 chrome 61+、edge 79+、firefox 117+、safari 16.4+（仅 ios/ipados）中可用，需 https 环境且通过 'share' in navigator 检测支持；调用需用户手势触发，参数至少含 title/text/url，失败时应降级至剪贴板复制或分享链接。
Web Share API 在现代浏览器中是否可用
绝大多数主流浏览器（Chrome 61+、Edge 79+、Firefox 117+、Safari 16.4+）已原生支持 navigator.share()，但 Safari 对桌面端支持仍有限——仅限 iOS/iPadOS 16.4+ 的 Safari。调用前必须确保页面在 HTTPS 环境下运行，HTTP 协议下 navigator.share 直接返回 undefined 或抛出 SecurityError。
检查方式很简单：
if ('share' in navigator) {
// 可安全调用
} else {
// 降级方案，比如复制链接或跳转系统分享页
}
按钮点击后触发 share() 的基本写法
不能直接在 HTML 的 onclick 属性里写异步逻辑，必须绑定事件监听器并处理 Promise。常见错误是忽略 catch 导致分享失败时静默失败。
-
navigator.share()只接受一个对象参数，必须包含title、text、url中至少一项；空对象会抛出TypeError -
url必须是当前源的相对路径或完整 HTTPS URL，跨域 URL 会被拒绝 - 移动端点击后会唤起系统原生分享面板；桌面端 Chrome 会弹出轻量级浮层，Firefox 和 Safari 暂不支持桌面端分享
示例：
<button id="share-btn">分享当前页面</button>
<script>
document.getElementById('share-btn').addEventListener('click', async () => {
try {
await navigator.share({
title: document.title,
text: '来看看这个',
url: window.location.href
});
} catch (err) {
if (err.name !== 'AbortError') {
console.error('分享失败:', err);
// 这里可 fallback 到复制链接等操作
}
}
});
</script>
分享失败时如何合理降级
用户取消分享、浏览器不支持、HTTPS 不满足、参数校验失败都会导致 navigator.share() 抛错。其中 AbortError 表示用户主动取消，通常无需处理；其他错误则建议提供替代路径。
- 先尝试
navigator.clipboard.writeText()复制链接（需用户手势触发，且部分旧版 Safari 不支持） - 退一步可用
document.execCommand('copy')（已废弃但兼容性更广） - 最简兜底：生成带参数的分享链接，如微信用
weixin://、WhatsApp 用https://wa.me/?text=...，但需注意平台限制和 URL 编码
注意：navigator.clipboard 调用也要求用户交互上下文（比如按钮 click），不能在页面加载时自动执行。
Android 和 iOS 上的兼容细节差异
iOS Safari 对 navigator.share() 支持较晚（16.4+），且不支持 files 字段（无法分享本地文件）。Android Chrome 支持更好，但若页面被添加为 PWA 后以独立窗口打开，某些 Android 厂商定制系统（如华为、小米）可能拦截分享调用。
- 分享
url时，iOS 会自动截断 query 参数中的敏感字段（如 utm_*），而 Android 一般保留完整 URL - 如果页面有 PWA manifest，确保
display设置为standalone或minimal-ui，否则 iOS 可能禁用分享 API - 测试时务必真机验证：模拟器或桌面 Chrome 的 Device Mode 不会真实触发系统分享面板
真正容易被忽略的是：分享行为本身不上传数据到你的服务器，但用户选择的分享目标（如微信、邮件）是否接收内容，完全取决于其客户端实现——你无法控制或监听最终是否发送成功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
