Web Share API需在HTTPS/localhost环境、用户点击触发，仅支持title/text/url字段且有同源等限制；必须用if(navigator.share)运行时检测，不支持iOS Safari 16.4前及Firefox桌面版，微信内置浏览器禁用。
Web Share API 不是“加个按钮就能用”的功能，它有明确的运行边界：只在 HTTPS（或 localhost）下生效，必须由用户 click 触发，且不支持图片、跨域 URL 或自动调用。超出这些条件，navigator.share() 直接报错或静默失败。
怎么判断浏览器是否支持 navigator.share()
不能靠 UA 字符串猜，必须运行时检测。iOS Safari 16.4+ 才开始支持，Firefox 桌面版至今不支持，Android Chrome 支持但文件分享（files）仍属实验性。
- 检测写法必须是
if (navigator.share)，不是typeof navigator.share === 'function'—— 后者在部分旧 Edge 中会误判为 true - 降级逻辑要提前准备，比如预设一个
fallbackShare()函数处理复制链接或跳转平台分享 URL - 别在页面加载完成时就检查，等按钮 DOM 就绪后再做，避免
navigator未定义报错
navigator.share() 的参数限制很实际
它只接受三个字段：title、text、url，且都有隐性约束，不是填了就一定能显示。
-
url必须是同源地址（如当前页是https://a.com/page，就不能传https://b.com/xxx），否则会被忽略；相对路径如/share是允许的 -
text在 Safari 上超过 200 字可能被截断或触发AbortError，建议控制在 120 字以内 -
title不参与社交平台卡片渲染，仅用于系统分享面板顶部显示，Facebook / WhatsApp 等抓取的是<meta property="og:title"> - 不要传空字符串或 undefined，某些 Android 版本会直接拒绝调起分享面板
为什么点击后没反应？常见触发失败原因
绝大多数“点了没反应”不是代码写错了，而是违反了 Web Share API 的安全模型。
立即学习“前端免费学习笔记（深入）”；
- 在
setTimeout、fetch回调、Promise.then里调用navigator.share()，会抛NotAllowedError—— 它必须在原始用户手势（click/mousedown/touchend）的同步调用链中 - 页面没走 HTTPS（生产环境）或用了 HTTP（非 localhost），API 直接不可用，
navigator.share为 undefined - 在微信内置浏览器（X5 内核）里，
navigator.share()始终返回 undefined —— 微信主动禁用了该 API，和你代码无关 - 未包裹
try...catch，错误被吞掉，控制台也看不到提示；建议至少捕获AbortError（用户取消）和NotAllowedError（权限/时机问题）
分享卡片为什么还是默认样式？和 navigator.share() 无关
Web Share API 只负责打开系统面板，不控制分享到 Facebook、WhatsApp 或钉钉后的卡片内容。那些卡片完全由 HTML 中的 <meta> 标签决定，且只读静态内容。
- 必须在
<head>中写死<meta property="og:title" content="...">，JS 动态改document.title或插入 meta 标签无效 -
og:image必须是绝对 HTTPS 路径，og:url应与当前页一致，否则平台抓取时会 fallback 到首页 - 微信内分享需 JS-SDK 签名，
navigator.share()在微信里根本走不通，这点容易被忽略 - 测试卡片效果要用 Facebook Sharing Debugger 或 LinkedIn Post Inspector，而不是点分享按钮看结果
真正麻烦的从来不是怎么调用 navigator.share()，而是搞清它在哪能用、在哪不能用、以及它和社交平台卡片之间根本不是一回事——这两个问题混在一起，八成会浪费半天调试时间。
