javascript - 如果支持 Web 共享 API，它应该显示 native 共享对话框，否则它应该转到 anchor 标记的 href 中定义的 URL

Question

下面的代码在支持 Web 共享 API 的设备上运行良好，并显示 native 共享对话框，但通过“ Uncaught (in promise) DOMException: Share cancelled ”错误，其中 Web 共享 API 不受支持且不会转到在 anchor 标记的 href 中定义的 URL。

<a href="https://example.com?utm_source=btn_share" class="btn-share" target="_blank">
    Share on Facebook
</a>


<script type="text/javascript">
    $(".btn-share").click(function(e){
        // Web Share API
        if (navigator.share){
            e.preventDefault();
            navigator.share({
                title: 'This is example website',
                url: 'https://example.com'
            });
        }
    });
</script>

如果设备不支持 Web 共享 API，则删除错误，以便它应该转到 anchor 标记的 href 中定义的 URL。

Answer 1

您需要将错误捕获为 navigator.share()是一个 promise ，

promise 返回 “中止错误”如果用户选择取消共享操作(主要在移动设备上)或者如果没有可用的共享目标(主要发生在桌面设备上)。因此，区分移动设备和台式计算机上的“AbortError”需要一些额外的机制。
引用:https://www.w3.org/TR/web-share/

目前解决您的问题的最佳方法是:
https://jsfiddle.net/g19but5o/2/

<a href="https://example.com" class="btn-share" target="_blank">
    Share on Facebook
</a>

$(".btn-share").click(function(clickEvent){
    var self = $(this);
    // Web Share API
    if (navigator.share){
        clickEvent.preventDefault();
        navigator.share({
                title: 'This is example website',
                url: 'https://example.com'
            })
            .then(function() {
                console.log('Successful share');
            })
            .catch(function(error) {
              console.log('Error sharing:', error);
              window.open($(self).attr('href'), '_blank');
            });
    }
});