HTML怎么做分享API_html Web Share API原生分享【解析】-html教程-PHP中文网

Web Share API需HTTPS/localhost环境且用户手势触发，检测应同时用navigator.share和navigator.canShare，参数仅支持title/text/url，须try...catch处理AbortError等错误。

html怎么做分享api_html web share api原生分享【解析】

Web Share API 是目前最轻量、最可靠、最接近“零维护”的网页分享方案，但只在 HTTPS（或 http://localhost）下可用，且必须由用户点击等手势触发 —— 不满足这两点，navigator.share 直接报错或静默失败。

怎么判断浏览器是否支持 `navigator.share`

不能只靠 if (navigator.share) 就开干。iOS Safari 16.4 之前、Firefox 全系、部分旧版 Chrome Android 都不支持；更隐蔽的是，某些 Android 定制系统（如华为 EMUI 12）会返回 navigator.share 存在，但调用时抛出 NotAllowedError 或直接无响应。

推荐写法：if (navigator.share && navigator.canShare) —— navigator.canShare 是更严格的兼容性守门员，能提前过滤掉“假支持”
即使通过检测，也要包裹 try...catch，捕获 AbortError（用户取消）、NotAllowedError（非手势触发）、TypeError（参数非法）三类常见错误
不要在 window.onload 或 DOMContentLoaded 里自动调用，否则 Chrome 会直接拒绝并报 NotAllowedError: Permission denied

`navigator.share` 支持哪些参数？图片能传吗？

navigator.share 接收一个对象，目前稳定支持的字段只有 title、text、url。注意：url 必须是当前页面同源地址（或 https:// 协议），传跨域链接会静默忽略或报错。

files 字段理论上存在，但仅 Android Chrome 115+ 真正可用；iOS Safari 和桌面端完全不认，传了也白传
url 不能是短链或带 UTM 参数的链接，部分系统分享面板会截断或拒绝解析，建议传原始 canonical URL
title 和 text 长度建议控制在 100 字符内，过长可能被截断（尤其微信内置浏览器对 text 极其敏感）

为什么点了按钮没反应？常见触发陷阱

最常踩的坑不是代码写错，而是事件绑定时机或上下文不对。比如用 addEventListener('click', ...) 绑在动态插入的按钮上，但没用事件委托；或者按钮被 pointer-events: none 挡住了。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

确保绑定的是原生 click 事件，而不是 touchstart 或自定义事件 —— Web Share API 只认标准手势事件
避免在异步回调里调用，例如：先发个请求拿分享文案，再调 navigator.share —— 这会导致失去“用户手势上下文”，触发 NotAllowedError
Vue/React 中注意：不要在 useEffect 或 mounted 里绑定 click，而要在模板中直接用 @click 或 onClick，保证事件处理器与用户点击严格同步

不支持 Web Share API 时该怎么降级？

别硬塞微博、微信、QQ 的 SDK —— 那会把首屏 JS 体积拉高 50KB+，FCP 延迟 300ms 以上。优先用平台原生分享链接 + Open Graph 标签组合。

微博：https://service.weibo.com/share/share.php?url= + encodeURIComponent(window.location.href) + &title= + 编码后标题
LinkedIn：https://www.linkedin.com/sharing/share-offsite/?url= + 同上编码 URL
务必在里加、、 —— 这决定了链接被粘贴到微信聊天框或 WhatsApp 时的卡片样式，和 navigator.share 完全无关但用户感知极强