此页面由 Cloud Translation API 翻译。

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

Web 应用可以使用系统提供的共享功能与针对具体平台的应用相同。

Joe Medley

借助 Web Share API，Web 应用可以使用系统提供的相同分享功能作为针对特定平台的应用提供。Web Share API 可让 Web 应用将链接、文本和文件分享到平台专用应用的方式

。 <ph type="x-smartling-placeholder">

功能和限制

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

它只能在通过 HTTPS 访问的网站上使用。
如果分享发生在第三方 iframe 中，则必须使用 allow 属性。
它必须被调用来响应用户操作（如点击）。调用使用 onload 处理程序是不可能的。
它可以共享网址、文本或文件。

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

分享链接和文本

如需分享链接和文本，请使用 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));
}

如果您的网站有多个网址指向相同的内容，请将网页的规范网址而非当前网址。无需共享 document.location.href，则应检查以下位置中是否存在规范网址 <meta> 标记：该网页的<head>，并与他人分享。这将为发布商提供更优质的体验用户。它不仅可以避免重定向，还可以确保将共享网址特定客户端的正确用户体验例如，一位朋友分享一个移动网址，而您在桌面设备上查看它，您应该会看到桌面版：

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 中触发分享操作，请执行以下操作：使用值为 web-share 的 allow 属性嵌入 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。

“追踪圣诞老人”案例研究

显示“分享”按钮的“追踪圣诞老人”应用。 — </ph> “追踪圣诞老人”分享按钮。

追踪圣诞老人是一个开源项目，节日传统。每年 12 月，您可以欢度节日季提供游戏和教育体验

2016 年，“追踪圣诞老人”团队在 Android 上使用 Web Share API。此 API 非常适合移动设备。过去几年，该团队移除了移动设备上的分享按钮，因为他们很难确定拥有多个共享目标的合理性。

但借助 Web Share API，他们得以展示一个按钮，节省宝贵的像素他们还发现，与通过网络共享进行分享的用户相比，未启用该 API 的用户。前往追踪圣诞老人，看看“网络分享”功能的实际应用。

浏览器支持

浏览器对 Web Share API 的支持有细微差别，建议您使用功能而不是假设某个特定方法支持。

以下是对此功能的支持情况的概要。如需了解详情，请点击任一支持链接。

navigator.canShare()

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

navigator.share()

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

表示对 API 的支持

您打算使用 Web Share API 吗？您的公开支持对 Chromium 团队有所帮助确定功能的优先级，并向其他浏览器供应商展示支持这些功能的重要性。

使用 # 标签向 @ChromiumDev 发送推文 #WebShare 并告诉我们您使用它的地点和方式。

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

功能和限制

分享链接和文本

分享文件

在第三方 iframe 中进行共享

“追踪圣诞老人”案例研究

浏览器支持

表示对 API 的支持

实用链接