Javascript 是否可以在智能手机上触发共享菜单(通过HTML/JS)?

Javascript 是否可以在智能手机上触发共享菜单(通过HTML/JS)?,javascript,android,html,ios,share,Javascript,Android,Html,Ios,Share,是否存在通过HTML或JavaScript触发智能手机本地浏览器共享功能的可能性 当然,有许多服务提供共享按钮。但是,当我想在facebook上共享网站时,我需要使用当前使用的浏览器登录facebook 几乎所有浏览器都内置了自己的共享功能,这会触发一个系统菜单来选择要用于共享的应用程序: 这个问题是关于:如何触发此菜单 我知道可以在链接的href属性中使用指定前缀触发电话呼叫,如tel:或callto:。也许这个共享菜单的快捷方式也存在?还是一些javascript代码?或者完全不同的方法怎

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

当然,有许多服务提供共享按钮。但是,当我想在facebook上共享网站时,我需要使用当前使用的浏览器登录facebook

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

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

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


提前感谢。

于2013年4月10日回复

据我所知,在移动操作系统的当前浏览器中没有这样的实现。因为这个问题让我感兴趣——谷歌搜索显示,在这方面正在做一些工作:

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

您可以使用android的方法

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

这是一个大问题。目前仅适用于Android、三星互联网和Safari(台式机和移动设备)的Chrome浏览器。而且桌面上的Edge和Chrome也得到了支持

我补充了这一点,因为到2018年7月16日,所有答案似乎都过时了

这是可能的,但仅在少数浏览器()中,通过
navigator
中的one-method API实现:

navigator
    .share({
        title: document.title,
        text: 'Hello World',
        url: window.location.href
    })
    .then(() => console.log('Successful share! It's now possible with the Web Share API!

However, it isn't widely supported as of yet. Currently, it's only available in Safari (mobile and desktop), and Chrome for Android. See Can I Use for details.

According to Introducing the Web Share API on Google Developers, there are several things to keep in mind:

  • your page needs to be served over HTTPS
  • you can only call
    navigator.share(…)
    in response to a user action, such as a click (i.e., you can't call it on page load)
  • you should feature-detect it in case it's not available on your users' platform (e.g., via
    navigator.share !== undefined
    )
The Google Developers article also notes that URLs shared with the Share API need not be on your own domain—you can share any URL.

Putting that all together, you could use something like this which uses the Share API if it's available, and falls back to sending an email if it's not*:

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());
导航器
.分享({
标题:document.title,
文字:“你好,世界”,
url:window.location.href
})

。然后(()=>console.log('成功共享!现在可以使用

然而,目前它还没有得到广泛的支持。目前,它仅在Safari(移动和桌面)和Android的Chrome中可用。有关详细信息,请参阅

根据谷歌开发者的说法,有几件事需要记住:

  • 您的页面需要通过HTTPS提供服务
  • 您只能调用
    navigator.share(…)
    以响应用户操作,例如单击(即,您不能在页面加载时调用它)
  • 如果您的用户平台上没有该功能,您应该对其进行功能检测(例如,通过
    navigator.share!==未定义的
Google开发者文章还指出,与ShareAPI共享的URL不必位于您自己的域中,您可以共享任何URL

综上所述,您可以使用类似这样的东西,如果共享API可用,就使用它,如果不可用,就返回发送电子邮件*:

函数createShareButton(){
const btn=document.createElement(“按钮”);
const title=document.title;
const text=“检查这个!”;
const url=window.location.href;
btn.innerText=“共享”在导航器中?“共享”:“通过电子邮件共享”;
btn.onclick=()=>{
如果(navigator.share!==未定义){
领航员
.分享({
标题
文本,
网址
})
。然后(()=>console.log(“共享!”)
.catch(err=>console.error(err));
}否则{
window.location=`mailto:?subject=${title}&body=${text}%0A${url}`;
}
};
返回btn;
}
document.title=“演示”;

document.body.appendChild(createShareButton());
这是可能的,我编写了一个函数来共享和观察异步的副作用:

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

${content}`;

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

我不熟悉在android上编写应用程序。但这听起来像是在编写应用程序。效果很好!这是正确的答案。
const shareContact = async (title, content) => {
  const text = `${title}

${content}`;

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