navigator.share实现调用浏览器分享功能

Winter Li

已于 2023-12-15 21:33:04 修改

阅读量1.3k

点赞数 6

文章标签： javascript 前端

于 2023-11-12 22:44:55 首次发布

本文链接：https://blog.csdn.net/qq_41837743/article/details/134366556

版权

序言

本文介绍了利用Javascript的navigator.share()方法来实现唤起浏览器分享功能，该方法在业务中也有很多的应用场景，例如名片分享、文章分享、评论分享等等，但目前并不是所有浏览器都会支持该功能，因此本文以edge浏览器为基础，列举了一个百度链接的分享例子。

navigator介绍

JavaScript navigator 对象中存储了与浏览器相关的信息，例如名称、版本等，我们可以通过 window 对象的 navigator 属性（即 window.navigator）来引用 navigator 对象，并通过它来获取浏览器的基本信息。

由于 window 对象是一个全局对象，因此在使用window.navigator时可以省略 window 前缀，例如window.navigator.appName可以简写为navigator.appName

navigator.share()的使用

代码例子如下：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <div class="btn_share">share</div>
    <script>
        document.getElementsByClassName('btn_share')[0].addEventListener('click', () => {
            if (navigator.share) {
                //当浏览器支持此功能
                navigator.share({
                    //要共享的标题
                    title: '分享标题',
                    //要共享的 URL
                    url: 'https://www.baidu.com',
                    //要共享的文本
                    text: '分享了一个百度链接',
                })
            } else {
                //当浏览器不支持此功能时
                alert("当前浏览器不支持此功能");
            }
        })
    </script>
</body>
</html>

分享效果图：