此页面由 Cloud Translation API 翻译。

通过 Web Share API 与操作系统共享界面集成

与平台专用应用一样，Web 应用可以使用系统提供的分享功能。

Joe Medley

借助 Web Share API，Web 应用可以使用与平台专用应用相同的系统提供的分享功能。借助 Web Share API，Web 应用可以与平台专用应用一样，将链接、文本和文件分享给设备上安装的其他应用。

功能和限制

网页共享具有以下功能和限制：

它只能在通过 HTTPS 访问的网站上使用。
如果分享是在第三方 iframe 中进行的，则必须使用 allow 属性。
必须在响应用户操作（例如点击）时调用此方法。无法通过 onload 处理脚本调用它。
可以分享网址、文本或文件。

浏览器支持

来源

分享链接和文字

如需分享链接和文本，请使用 share() 方法，这是一种基于 Promise 的方法，具有必需的属性对象。为防止浏览器抛出 TypeError，对象必须包含以下属性之一：title、text、url 或 files。例如，您可以分享文字而无需提供网址，反之亦然。允许使用这三个成员可扩大用例的灵活性。假设在运行以下代码后，用户选择了电子邮件应用作为目标。title 参数可能会成为电子邮件主题、text、邮件正文以及文件、附件。

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

如果您的网站上有多个指向同一内容的网址，请分享网页的规范网址，而不是当前网址。您应在网页的 <head> 中查找规范网址 <meta> 标记，并分享该标记，而不是分享 document.location.href。这将为用户提供更好的体验。这不仅可以避免重定向，还可以确保共享网址为特定客户端提供正确的用户体验。例如，如果您的好友分享了移动版网址，而您在桌面设备上查看该网址，则应该会看到桌面版：

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

分享文件

如需共享文件，请先测试并调用 navigator.canShare()。然后，在对 navigator.share() 的调用中添加文件数组：

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

请注意，该示例通过测试 navigator.canShare()（而非 navigator.share()）来处理特征检测。传递给 canShare() 的数据对象仅支持 files 属性。您可以分享某些类型的音频、图片、PDF、视频和文本文件。如需查看完整列表，请参阅 Chromium 中允许的文件扩展名。未来可能会添加更多文件类型。

在第三方 iframe 中分享

如需从第三方 iframe 中触发分享操作，请嵌入 allow 属性值为 web-share 的 iframe：

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

您可以在 Glitch 上的演示中查看此操作的实际运行情况，并查看源代码。如果未提供该属性，将会导致 NotAllowedError 并显示消息 Failed to execute 'share' on 'Navigator': Permission denied。

追踪圣诞老人案例

Santa Tracker 是一个开源项目，是 Google 的一个节日传统。每年 12 月，您都可以通过游戏和教育体验欢庆这个季节。

2016 年，“追踪圣诞老人”团队在 Android 上使用了 Web Share API。此 API 非常适合移动设备。在过去几年里，该团队移除了移动设备上的分享按钮，因为空间非常有限，他们无法证明需要添加多个分享目标。

但借助 Web Share API，他们能够显示一个按钮，从而节省宝贵的像素。他们还发现，与未启用该 API 的用户相比，使用 Web Share 分享内容的用户增加了约 20%。前往 Santa Tracker 查看 Web Share 的实际运作方式。

浏览器支持

浏览器对 Web Share API 的支持因浏览器而异，建议您使用功能检测（如前面的代码示例中所述），而不是假定某种方法受支持。

下面简要介绍了对此功能的支持。如需了解详情，请点击任一支持链接。

navigator.canShare()

浏览器支持

来源

navigator.share()

浏览器支持

来源

显示对该 API 的支持

您是否打算使用 Web Share API？您的公开支持有助于 Chromium 团队确定功能的优先级，并向其他浏览器供应商表明支持这些功能的重要性。

使用 #WebShare 标签向 @ChromiumDev 发送推文，告诉我们您在哪里以及如何使用该工具。

通过 Web Share API 与操作系统共享界面集成

功能和限制

分享链接和文字

分享文件

在第三方 iframe 中分享

追踪圣诞老人案例

浏览器支持

显示对该 API 的支持

实用链接