在网络共享API上

Web Share API 真棒！（参见我们的报道）。简单来说，它利用您所在平台的原生分享功能（如果该平台支持的话）。

我喜欢它，远胜于其他方法：

为什么？

• Web Share API 只需几行代码，非常简单！无需图片、冗长的 JavaScript 或 iframe，也不存在过时的风险（咳咳，Google ）。
• 用户看到的 UI 会根据其平台进行定制，甚至可能由用户自行定制，包含他们想要的内容。

网页标准做得好！

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

因此，如果我要使用它，我宁愿在页面上放置按钮之前先测试支持情况。这非常容易：

if (navigator.share) {
  // 代码在此处
}

以下是一个示例，如果支持该 API，我会将一个按钮添加到文章中：

这段 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 onclick="navigator.share(...)">Share</button>

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

<button data-title="..." data-text="...">Share</button>

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

但是，如果浏览器不支持，它是否应该存在呢？当然，如果您使用 polyfill：

这个 polyfill 会在不支持的情况下将按钮变成 mailto: 体验。这非常巧妙。我认为如果我是在生产环境中，我可能会只在真正支持该功能时才添加按钮。

以上是在网络共享API上的详细内容。更多信息请关注PHP中文网其他相关文章！