【问题标题】:Is it possible to trigger share menu on smartphones (via HTML/JS)?是否可以在智能手机上触发共享菜单(通过 HTML/JS)?
【发布时间】:2013-04-02 00:34:04
【问题描述】:

是否有可能通过 HTML 或 JavaScript 在智能手机上的本地浏览器中触发共享功能?

当然,有很多服务都提供了分享按钮。但是当我例如想在facebook上分享一个网站,我需要在我当前使用的浏览器中登录facebook。

几乎所有浏览器都内置了自己的共享功能,它会触发系统菜单来选择您要用于共享的应用程序:

这个问题是关于:如何触发这个菜单?

我知道可以在链接的 href 属性中使用指定前缀触发电话呼叫,例如 tel:callto:。也许这个共享菜单的快捷方式也存在?或者一些javascript代码?或者完全不同的方式怎么做?

提前致谢。

【问题讨论】:

    标签: javascript android html ios share


    【解决方案1】:

    有可能有一个很大的收获。目前仅适用于 Android 版 Chrome、三星互联网和 Safari(桌面版和移动版)。桌面版 Edge 和 Chrome 即将获得支持http://caniuse.com/#feat=web-share

    if (navigator.share) {
      navigator.share({
        title: document.title,
        text: "Hello World",
        url: window.location.href
      })
      .then(() => console.log('Successful share'))
      .catch(error => console.log('Error sharing:', error));
    }
    

    https://developers.google.com/web/updates/2016/10/navigator-share

    【讨论】:

      【解决方案2】:

      我添加了这个,因为到 2018 年 7 月 16 日,所有答案似乎都已过时。

      有可能,但仅在少数浏览器(MDN Reference)中,通过navigator 中的一种方法 API 实现:

      navigator
          .share({
              title: document.title,
              text: 'Hello World',
              url: window.location.href
          })
          .then(() => console.log('Successful share! ?'))
          .catch(err => console.error(err));
      

      谷歌参考:https://developers.google.com/web/updates/2016/10/navigator-share

      另外,有一个叫做 Web Intends 的东西是一个死项目,你应该改用navigator.share

      【讨论】:

      • 完美运行!这是有效的答案。
      【解决方案3】:

      2013 年 4 月 10 日回答

      据我所知,移动操作系统上的当前浏览器中没有这样的实现。由于这个问题让我感兴趣 - 谷歌搜索显示正在朝着这个方向开展工作:

      抱歉 - 我不知道解决方法。

      【讨论】:

        【解决方案4】:

        现在可以使用Web Share API

        但是,它尚未得到广泛支持。目前,它仅在 Safari(移动和桌面)和 Android 版 Chrome 中可用。详情请见Can I Use

        根据 Google Developers 上的Introducing the Web Share API,有几点需要牢记:

        • 您的页面需要通过 HTTPS 提供
        • 您只能调用navigator.share(…) 来响应用户操作,例如点击(即,您不能在页面加载时调用它)
        • 您应该对它进行功能检测,以防它在您的用户平台上不可用(例如,通过 navigator.share !== undefined

        Google Developers 文章还指出,与 Share API 共享的 URL 不必位于您自己的域中 - 您可以共享任何 URL。

        将所有这些放在一起,您可以使用类似这样的东西,如果可用则使用 Share API,如果不可用则回退到发送电子邮件*

        function createShareButton() {
          const btn = document.createElement("button");
        
          const title = document.title;
          const text = "Check this out!";
          const url = window.location.href;
        
          btn.innerText = "share" in navigator ? "Share" : "Share via e-mail";
        
          btn.onclick = () => {
            if (navigator.share !== undefined) {
              navigator
                .share({
                  title,
                  text,
                  url
                })
                .then(() => console.log("Shared!"))
                .catch(err => console.error(err));
            } else {
              window.location = `mailto:?subject=${title}&body=${text}%0A${url}`;
            }
          };
        
          return btn;
        }
        
        document.title = "Demo";
        document.body.appendChild(createShareButton());

        *:请考虑使用更合适的后备方案(例如社交分享),具体取决于您的用例。

        【讨论】:

          【解决方案5】:

          有可能,我写了一个函数来分享和观察异步副作用:

          const shareContact = async (title, content) => {
            const text = `${title}
          
          ${content}`;
          
            try {
              await navigator.share({
                text,
              });
            } catch (e) {
              console.log(e);
            }
          };
          

          【讨论】:

            【解决方案6】:

            你可以使用安卓的WebView.addJavascriptInterface()方法。

            首先,您需要编写一个类来触发打开共享菜单的意图 (take a look here),然后使用 addJavascriptInterface() 调用实现该类。之后,您需要做的就是从您的 Javascript 中调用该方法。

            【讨论】:

            • 我不熟悉在 android 上编写应用程序。但这听起来像是在写一个应用程序。
            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2013-11-24
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2015-04-15
            相关资源
            最近更新 更多