如何在 Html 和 JavaScript 中使用 Web 共享 API 进行本机共享选项？

Web Share API是一个 JavaScript API，它允许网站通过与操作系统集成，通过设备的本机共享对话框共享文本/URL/文件。它仅适用于移动设备和有限的浏览器。它最初是在 Chrome 61 for android 中引入的。

网络共享API的特点：

• 能够共享 URL、纯文本或文件。
• 原生的、用户友好的和用户自定义的共享对话框。
• 更少的代码和操作系统管理的 UI。 （开发人员不需要手动处理对话框）
• 广泛的共享选项。 （开发人员不必担心。）

网络共享 API 的限制：

• 仅在特定浏览器和设备上受支持。 （建议添加回退以防止兼容性问题）
• 仅可通过 HTTPS 使用。
• 为防止误操作，它只能在响应某些用户操作时触发，例如单击

注意：桌面和非 HTTPS 协议不支持 Web 共享 API。因此，必须通过 HTTPS 提供网页才能使用它。

例子：

HTML

  

    
        How to use web share API for native 
        share options in HTML and JavaScript?
    

  

    GeeksforGeeks
  
    Web Share API Demonstration
  
    Share
  
    
        document.querySelector('#shareBtn')
        .addEventListener('click', event => {
  
            // Fallback, Tries to use API only
            // if navigator.share function is
            // available
            if (navigator.share) {
                navigator.share({
  
                    // Title that occurs over
                    // web share dialog
                    title: 'GeeksForGeeks',
  
                    // URL to share
                    url: 'https://geeksforgeeks.org'
                }).then(() => {
                    console.log('Thanks for sharing!');
                }).catch(err => {
  
                    // Handle errors, if occured
                    console.log(
                    "Error while using Web share API:");
                    console.log(err);
                });
            } else {
  
                // Alerts user if API not available 
                alert("Browser doesn't support this API !");
            }
        })
    

  

输出：

下面列出的许多浏览器都支持此方法：

• 铬安卓 (61+)
• 火狐安卓 (79+)
• 歌剧安卓 (48+)
• iOS Safari (12.2+)
• 三星互联网 (8.0+)

参考： https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share