如何在HTML5中调用WebShareAPI触发手机系统原生的分享功能组件-H5教程-PHP中文网

可直接用 navigator.share() 触发手机系统原生分享面板，但需满足https安全上下文、用户手势触发（如click）、参数合规（url需同源）等前提，ios safari仅限pwa且ios 16.4+支持。

如何在html5中调用webshareapi触发手机系统原生的分享功能组件

可以直接用 navigator.share() 方法触发手机系统原生分享面板，但需满足几个关键前提条件。

必须在安全上下文中运行

Web Share API 只能在 HTTPS 协议下使用（本地开发时 localhost 也允许）。HTTP 站点会直接报错：navigator.share is not a function 或调用失败。

必须由用户手势触发

不能在页面加载、定时器、异步回调中直接调用，必须绑定在用户主动操作上，比如：

click、tap 事件（推荐）
touchend（注意避免和 click 冲突）
不能在 DOMContentLoaded、fetch 回调、setTimeout 中调用

调用方式与参数格式

基本写法如下（需先检测兼容性）：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

if (navigator.share) {
  document.getElementById('share-btn').addEventListener('click', async () => {
    try {
      await navigator.share({
        title: '分享标题',
        text: '分享正文内容',
        url: 'https://example.com/page'
      });
      console.log('分享成功');
    } catch (err) {
      console.log('分享被取消或失败：', err);
    }
  });
} else {
  console.log('当前浏览器不支持 Web Share API');
}

注意：

title 和 text 非必需，但至少提供 url 或 text 之一
url 必须是当前源的同源地址（或合法跨域可共享 URL），部分浏览器（如 Safari）会自动忽略跨域 URL
Android Chrome、Edge、Samsung Internet 支持良好；iOS Safari 自 iOS 16.4 起支持，且仅限 PWA 添加到主屏幕后才可用