在網絡共享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中文網其他相關文章！