Web Share API

安全上下文： 此功能仅在安全上下文（HTTPS）中可用，且支持此功能的浏览器数量有限。

Web Share API 提供了一种机制，用于将文本、链接、文件和其他内容共享给用户选择的任意共享目标。

注意： 此 API 在 Web Workers 中不可用（未通过 WorkerNavigator 暴露）。

注意：此 API 不应与 Web Share Target API 混淆，后者允许网站将自身指定为共享目标。

概念与用法

Web Share API 允许网站通过利用底层操作系统的共享机制，将文本、链接、文件和其他内容共享给用户选择的共享目标。这些共享目标通常包括系统剪贴板、电子邮件、联系人或消息应用程序，以及蓝牙或 Wi-Fi 信道。

该 API 只有两个方法。在将数据传递给 navigator.share() 进行发送之前，可以使用 navigator.canShare() 方法来验证数据是否“可共享”。

navigator.share() 方法会调用底层操作系统的原生共享机制并传递指定的数据。它需要瞬时激活，因此必须通过 UI 事件（如按钮点击）触发。此外，该方法必须指定原生实现支持共享的有效数据。

Web Share API 受 web-share 权限策略的限制。如果支持该策略但未授予权限，两个方法都会指示数据不可共享。

接口

其他接口的扩展

navigator.canShare(): 返回一个布尔值，指示指定的数据是否可共享。
navigator.share(): 返回一个 Promise，如果传递的数据已成功发送到共享目标，则该 Promise 会解析。此方法必须在按钮点击或其他用户激活时调用（需要瞬时激活）。

示例

以下代码显示了如何使用 navigator.share() 共享一个链接，该链接由按钮点击触发。

const shareData = {
  title: "MDN",
  text: "Learn web development on MDN!",
  url: "https://mdn.org.cn",
};

const btn = document.querySelector("button");
const resultPara = document.querySelector(".result");

// Share must be triggered by "user activation"
btn.addEventListener("click", async () => {
  try {
    await navigator.share(shareData);
    resultPara.textContent = "MDN shared successfully";
  } catch (err) {
    resultPara.textContent = `Error: ${err}`;
  }
});

上面的示例取自我们的 Web share test（查看源代码）。您也可以在 navigator.share() 中看到此示例的实时版本。