使用原生 Web 共享 JavaScript API
您是否知道可以使用 JavaScript 调用本机共享功能？
你可能在网上见过它们。
如果没有，我添加了一个视频演示，让你看看它的外观。
有兴趣把它添加到你的网站吗？
跟我一起来构建吧。
JavaScript 原生 Web 共享 API
需要注意的是，此方法并不适用于所有浏览器，它主要针对移动设备构建，但 Safari 等一些桌面版本也支持它。
请记住，当您使用此功能时，您应该始终创建后备共享方法。
我们要做的第一件事是查看当前用户是否支持导航器。
我们可以使用该in方法来检查导航器是否具有共享功能。
确定它的代码如下所示：
if ('share' in navigator) {
console.log('native share available');
} else {
console.log('provide fallback share');
}
现在我们可以继续在我们的网页上添加一个可以点击的按钮。
<button id="share-button">Share me</button>
然后我们可以通过按钮的 ID 获取该按钮。
const shareButton = document.getElementById('share-button');
并附加一个监听器。
shareButton.addEventListener('click', (event) => {
// Do the share action
});
在这个函数中，我们可以调用原生共享或者使用我们的后备共享机制。
shareButton.addEventListener('click', (event) => {
if ('share' in navigator) {
navigator
.share({
title: 'Look at this native web share',
url: 'https://daily-dev-tips.com/posts/using-the-native-web-share-javascript-api/',
})
.then(() => {
console.log('Callback after sharing');
})
.catch(console.error);
} else {
console.log('provide fallback share');
}
});
让我们仔细看看这里发生了什么。
- 我们将点击处理程序附加到按钮
- 我们检查是否有原生共享选项
- 是的：我们用标题和 URL 调用它
- 不：我们应该提供一些后备方案
如您所见，我们甚至可以将回调附加到原生的分享 API。
您可能想用它来感谢用户的分享或记录一些分析事件。
如果你有兴趣，可以在这个 CodePen 上尝试一下。
Web 共享 API 选项
在我们的示例中，我们设置了标题和 URL 选项。让我们看看还能提供什么。
Web 共享 API 接受以下选项：
- title：代表标题的字符串（可能会被共享平台忽略）
- URL：可分享链接的URL
- text：表示有关共享操作的一些信息的字符串
- 文件：文件数组，支持多种文件选项
总的来说，你可以提供这样的对象：
const file = new File([blob], 'picture.jpg', { type: 'image/jpeg' });
navigator.share({
title: 'Web Share',
text: 'Testing out the web share API',
url: 'https://daily-dev-tips.com/posts/using-the-native-web-share-javascript-api/',
files: [file],
});
浏览器支持
并非所有系统都支持此功能。不过，大多数移动浏览器都会支持。
一般来说，建议为共享选项设置自定义的后备模式。
感谢您的阅读，让我们联系起来！
感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。
文章来源：https://dev.to/dailydevtips1/using-the-native-web-share-javascript-api-23ei