如果支持网络共享 API，它应该显示本机共享对话框，否则它应该转到锚标记的 href 中定义的 URL

Question

以下代码在支持网络共享 API 的设备上运行良好，并显示本机共享对话框，但通过“未捕获（承诺）DOMException：共享取消”网络共享 API 不受支持且不会转到锚标记的 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，它应该转到锚标记的 href 中定义的 URL。

Answer 1

因为 navigator.share 是一个 promise，我会捕获错误，在 link 上设置一个属性让你知道它的错误，然后模拟另一个点击。

https://jsfiddle.net/n672g4kr/

（Whosebug 显然不会从 fiddle 打开一个新的 window）

$(".btn-share").click(function(e){
    // Web Share API
    if (navigator.share && !$(this).prop('error')){
        e.preventDefault();
        navigator.share({
            title: 'This is example website',
            url: 'https://example.com'
        }).catch(() => {
            $(this).prop('error', true);
            $(this).click();
        });
    } else {
        $(this).prop('error', false);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://example.com?utm_source=btn_share" class="btn-share" target="_blank">
    Share on Facebook
</a>

Answer 2

您需要捕获错误，因为 navigator.share() 是一个 Promise，
Promise returns "AbortError" 如果用户选择取消分享操作（主要是在移动设备上）或者没有分享目标可用（它主要发生在桌面设备上）。因此区分移动设备和桌面计算机上的“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');
            });
    }
});

如果支持网络共享 API，它应该显示本机共享对话框，否则它应该转到锚标记的 href 中定义的 URL

If web share API is supported it should show up native share dialog else it should go to the URL defined in href of the anchor tag

javascript

jquery

web-share