js 实现网页分享
实现网页分享功能
在JavaScript中实现网页分享功能可以通过Web Share API或自定义分享按钮完成。Web Share API是现代浏览器提供的原生接口，允许调用设备系统的分享功能。
使用Web Share API
Web Share API简单易用，但需注意浏览器兼容性（主要支持Chrome、Edge、Safari等移动端和部分桌面端）。
if (navigator.share) {
navigator.share({
title: '网页标题',
text: '分享内容描述',
url: 'https://example.com',
})
.catch(error => console.log('分享失败:', error));
} else {
console.log('当前浏览器不支持Web Share API');
}自定义分享按钮
对于不支持Web Share API的浏览器，可手动实现主流平台的分享链接：
function shareToPlatform(platform) {
const url = encodeURIComponent(window.location.href);
const title = encodeURIComponent(document.title);
let shareUrl;
switch(platform) {
case 'twitter':
shareUrl = `https://twitter.com/intent/tweet?text=${title}&url=${url}`;
break;
case 'facebook':
shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
break;
case 'linkedin':
shareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${title}`;
break;
case 'whatsapp':
shareUrl = `https://wa.me/?text=${title} ${url}`;
break;
default:
return;
}
window.open(shareUrl, '_blank', 'width=600,height=400');
}复制链接功能
添加复制链接到剪贴板的功能可提升用户体验：
function copyToClipboard() {
const url = window.location.href;
navigator.clipboard.writeText(url)
.then(() => alert('链接已复制!'))
.catch(err => console.error('复制失败:', err));
}注意事项
- Web Share API要求网站通过HTTPS提供服务
- 某些浏览器可能仅在用户触发事件（如点击）时才允许调用navigator.share
- 自定义分享链接需要处理各平台的URL参数格式差异
- 移动端适配时建议使用响应式设计布局分享按钮
完整示例实现
<button onclick="nativeShare()">原生分享</button>
<button onclick="shareToPlatform('twitter')">分享到Twitter</button>
<button onclick="shareToPlatform('facebook')">分享到Facebook</button>
<button onclick="copyToClipboard()">复制链接</button>
<script>
function nativeShare() {
if (navigator.share) {
navigator.share({
title: document.title,
text: '看看这个有趣的网页',
url: window.location.href,
});
} else {
alert('您的浏览器不支持原生分享，请使用其他分享方式');
}
}
// 其他函数实现同上
</script>
