Question

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

当然，有许多服务提供分享按钮。但是，当我想要在Facebook上分享一个网站，我需要在我目前正在使用的浏览器中登录到facebook。

几乎所有浏览器都内置了自己的共享功能，触发系统菜单选择要用于分享的应用：

System share menu in android os

这个问题是关于：如何触发此菜单？

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

提前致谢。

Answer 1

可能有很大的捕获量。目前仅适用于Android版Chrome和Safari（桌面版和移动版）。 http://caniuse.com/#feat=web-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

Answer 2

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

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

Answer 3

我添加了此内容，因为所有答案似乎都已在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));

Google的参考：https://developers.google.com/web/updates/2016/10/navigator-share

另外，还有一个叫做 Web Intents 的东西，这是一个失败的项目，您应该改而使用navigator.share。

Answer 4

你可以使用WebView.addJavascriptInterface()方法安装android。

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

Answer 5

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());

_{*：请根据您的使用情况，考虑使用更合适的后备广告（例如社交分享）。}

Answer 6

有可能，我编写了一个函数，可以共享和观察异步副作用：

const shareContact = async (title, content) => {
  const text = `${title}

${content}`;

  try {
    await navigator.share({
      text,
    });
  } catch (e) {
    console.log(e);
  }
};

是否可以在智能手机上触发共享菜单（通过HTML / JS）？

6 个答案: