navigator.share 只能在 https/localhost 安全上下文下由用户手势触发，仅支持 title/text/url 三字段且需兼容降级；移动端需真机 https 测试，桌面端基本不支持，须手动实现 clipboard 或 url 分享 fallback。
navigator.share 在 HTML 编辑器中根本不能直接调用
因为 navigator.share 是受限制的 API：它只在安全上下文（HTTPS 或 localhost）中可用，且必须由**用户手势触发**（比如 click、tap），不能在页面加载、定时器或编辑器内容变化回调里自动调用。很多 HTML 编辑器（如 Quill、Tiptap、CKEditor）的“导出”或“分享”按钮如果没绑定到原生 DOM 事件，就会报 DOMException: Share API is not available in this context。
实操建议：
- 确保你的编辑器分享按钮是真实
<button></button>元素，且绑定的是addEventListener('click', ...)，而非通过框架封装后丢失了事件源信息的抽象方法 - 不要在
input、change或editor.on('update')回调里调用navigator.share—— 即使加了setTimeout也不行 - 检查当前页面协议：HTTP 页面会静默失败，控制台可能只显示
TypeError: navigator.share is not a function（说明未启用或环境不满足）
分享前必须提取纯文本或 HTML 内容并做裁剪
navigator.share 只接受 title、text、url 三个字段，不支持富文本、图片或文件。你在编辑器里写的加粗、列表、图片，在分享时全得降级处理。
实操建议：
- 用编辑器提供的 API 提取内容：Quill 用
quill.root.innerHTML或quill.getText()；Tiptap 用editor.getHTML()或editor.getText()；CKEditor 5 推荐editor.getData()+ 自行 strip 标签 -
text字段有长度限制（Android Chrome 约 10MB，但实际建议 ≤ 2000 字符），超长需截断并提示用户：“内容过长，已自动截取前 2000 字” - 避免传空字符串 ——
navigator.share({ text: '' })会直接抛AbortError，务必做非空校验
兼容性 fallback 必须手动实现
桌面端浏览器（Chrome macOS、Firefox、Safari）基本不支持 navigator.share；iOS Safari 虽支持，但仅限于 iOS 16.4+ 且不支持 text 字段（只认 url）。这意味着你不能只写一个 if (navigator.share) 就完事。
实操建议：
- 检测能力时加上平台判断：
if (navigator.share && /Android|iPhone|iPad/i.test(navigator.userAgent)) - fallback 方案要具体：复制到剪贴板（
navigator.clipboard.writeText）、生成分享链接（https://twitter.com/intent/tweet?text=...）、或唤起系统邮件客户端（location.href = 'mailto:?subject=...&body=...'） - 不要依赖第三方 SDK（如 social-share.js）来“模拟” share —— 它们只是拼 URL，和原生 API 行为完全不同，且无法访问系统分享面板
移动端真机调试必须用 HTTPS + 真实设备
localhost 可以跑通 navigator.share，但一旦部署到测试域名（比如 test.example.com），若没有 HTTPS，API 会彻底不可用。更隐蔽的问题是：Chrome DevTools 的“Network Conditions”里模拟的移动设备，无法触发真正的系统分享面板，只能看到白屏或静默失败。
实操建议：
- 用
ngrok或localtunnel给本地服务套一层 HTTPS 域名，再用手机浏览器访问测试 - 在真机上打开开发者工具（Safari Web Inspector / Chrome Remote Debugging），看控制台是否报
NotAllowedError: Permission denied（说明手势链断裂）或AbortError（用户取消分享） - 别信模拟器 —— Android 模拟器默认没装可响应 share 的应用（如 WhatsApp、Telegram），即使 API 调用成功，也看不到效果
最常被忽略的一点：分享面板弹出后，用户选中某个 App，但该 App 本身对传入的 text 长度、编码、换行符有各自解析逻辑 —— 比如微信会过滤掉所有 HTML 标签但保留 \n，而 Slack 会把连续空格转成单个空格。这部分没法靠前端控制，只能在分享前做针对性适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
