Web Share API 可实现跨平台分享,需先检测支持性,调用 navigator.share() 并提供降级方案,如复制链接或显示二维码,确保在 HTTPS 环境下由用户触发。

Web Share API 是现代浏览器提供的一项轻量级功能,允许网页直接调用系统原生的分享界面,将文本、链接或文件分享到用户设备上已安装的应用中。它支持大多数主流移动和桌面平台,包括 Chrome、Edge 和 Safari(部分支持),非常适合构建跨平台的分享功能。
检查浏览器是否支持 Web Share API
在使用前需确认当前环境是否支持该 API,避免调用时报错。
可通过以下代码判断:
if (navigator.share) {
// 支持 Web Share API
} else {
// 不支持,可降级显示传统分享按钮或提示
}
调用 navigator.share() 方法
当确认支持后,调用 navigator.share() 并传入要分享的内容对象。支持的字段包括:
- title:分享标题(可选)
- text:分享正文文本(可选)
- url:分享的链接(推荐使用绝对 URL)
示例代码:
async function shareContent() {
try {
await navigator.share({
title: '看看这个页面',
text: '我发现了一个很棒的内容!',
url: 'https://example.com/page'
});
console.log('分享成功');
} catch (err) {
if (err.name !== 'AbortError') {
console.error('分享失败:', err);
}
}
}
注意:该方法必须由用户手势触发(如点击按钮),否则会被浏览器阻止。
处理不支持的场景
对于不支持 Web Share API 的浏览器,可以提供备用方案:
例如实现复制链接功能:
async function fallbackShare(url) {
try {
await navigator.clipboard.writeText(url);
alert('链接已复制,快去分享吧!');
} catch (err) {
console.error('复制失败:', err);
}
}
兼容性与限制
目前 Web Share API 在以下环境中表现良好:
- Android 上的 Chrome、Edge
- iOS 15.4+ 的 Safari(部分支持,仅限 URL 分享)
- Windows 和 macOS 上的部分新版浏览器
需要注意的限制:
- 必须在 HTTPS 环境下运行
- 只能响应用户操作(如 click)
- 无法指定分享目标应用
- 不支持自定义分享渠道(如只分享到微信)
基本上就这些。只要合理检测支持性、调用 share 方法并设置好降级逻辑,就能实现一个简洁高效的跨平台分享功能。不需要引入第三方 SDK,减少页面负载,用户体验也更流畅。










