一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    Navigator.share原生的分享API

    技术 63 2021-04-19 15:54

    直接上代码吧:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <p><button>Share MDN!</button></p>
    
        <p class="result"></p>
      </body>
    
      <script>
        const btn = document.querySelector("button");
        const resultPara = document.querySelector(".result");
        const shareData = {
          title: "MDN",
          text: "Learn web development on MDN!",
          url: "https://developer.mozilla.org",
        };
    
        btn.addEventListener("click", () => {
          navigator
            .share(shareData)
            .then(() => (resultPara.textContent = "MDN shared successfully"))
            .catch((e) => (resultPara.textContent = "Error: " + e));
        });
      </script>
    </html>
    

    注:可能存在浏览器兼容的问题,暂时只在chrome上使用。

    MDN WEB DOC 参考文档:https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share

    文章评论

    评论列表(0