关于 Web Share API

我认为 Web Share API 非常酷（这里是我们对此的报道）。简而言之，它利用了您所处平台上的原生分享功能，前提是该平台支持它。

我喜欢这个

比这些东西多得多

为什么？

• Web Share API 只需要几行代码。很容易！没有图片，没有重量级的 JavaScript 或 iframe，也没有过时的风险（咳咳，Google+）。
• 用户看到的 UI 会根据其平台进行自定义，甚至可能由他们自己进行自定义，以包含他们想要的内容。

网页标准做得好。

但它并非在所有地方都受支持。例如，我正在 Chrome 中撰写这篇博文，它在桌面版 Chrome 中不起作用。但它在桌面版 Safari 中可以正常工作！

因此，如果我要使用它，我宁愿在将按钮放在页面上之前测试其支持情况。这很容易

if (navigator.share) {

}

这是一个示例，如果 API 受支持，我将在文章中放置一个 <button>

该 JavaScript 做了一些花哨的处理，以获取文章的标题和第一段，以便在 API 中使用。我喜欢 Jeremy Keith 在页面级别是如何做的

if (navigator.share) {
  navigator.share(
    {
      title: document.querySelector('title').textContent,
      text: document.querySelector('meta[name="description"]').getAttribute('content'),
      url: document.querySelector('link[rel="canonical"]').getAttribute('href')
    }
  );
}

您也可以只将字符串传递给这些值。这只是展示了您如何在任何页面上动态执行操作。

Jeremy 一直在倡导 Web Share API 的 JavaScript 可选版本，他认为它可以这样工作

<button type="share">

然后，用于指定标题和文本

<button type="share" value="title,text">

我觉得这有点奇怪，有逗号。如果标题中包含逗号怎么办？那么指定 URL 呢？我们可以将它们全部拆分为属性吗？我想我知道 Jeremy 会怎么说：这是一个简单的声明式版本。如果您想更改默认行为，这就是 JavaScript 的作用。

但是，如果浏览器不支持它，它是否应该存在？当然，如果您对其进行 polyfill

如果不受支持，此 polyfill 会将按钮转换为 mailto: 体验。这很聪明。我认为如果我处于生产环境中，我可能只会在真正支持该功能时才插入按钮。