js复制到clipboard,pc正常,safari未响应

How?

        网络上有很多文章是关于如何去实现这功能的,比如有直接execCommand('copy')还有用第三方插件的比如clipboard.js等等,我这边是直接用的这个插件,然后本文主要是记录说明一下遇到的问题,而且问题网络我找是没找到具体答案的,如果你也是这样的问题,希望可以给你提供帮助。

问题:复制功能PC上正常,IPad上Safari未响应

        这个问题还是测试反馈的,测试会有测safari的兼容性,然而问题的调试还是比较困难的,因为用的是window电脑,根据网络上说的,要调试Ipad上safari出现的问题可以连线或者远程调试,不过都需要ios系统的电脑,所以这边暂时只能通过去找找有没有类似的问题,以及通过alert(目前只知道这个,不知道是否有更好的可以看log的)log信息,然后去猜想问题点。

问题代码:

<button class="btn btn-info" onclick="copyLink()"><i class='fa fa-external-link'></i></button>

<button id="copyLink" style="display:none" class="copy-link"></button>

<script src="~/Content/Scripts/clipboard.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
        initCopyLink();
    });

    function initCopyLink() {
        var clipboard = new ClipboardJS('.copy-link');
        clipboard.on('success', function (e) {
            alert("copy success!");
            e.clearSelection();
        });
        clipboard.on('error', function (e) {
            alert("err:" + JSON.stringify(e));
        });
    }

    function copyLink() {
        $.ajax(...,Success(data));
    }

    function Success(data)
    {
        var link = document.getElementById("copyLink");
        link.setAttribute("data-clipboard-text", data);
        link.click();
    }

</script>

解决步骤:

大概描述一下,这边是一个复制按钮然后有异步去ajax请求后台然后返回值再把这个值复制,PC都是正常的,在IPad的safari浏览器这边clipboard.on('error')会捕获到,但是何奈这边没有出错信息,这个e只有复制的文本信息,还有trigger等,所以即使捕获到也看不出啥来。然后就去查下有没有相关的东西,有参考了以下这个(感觉算是比较接近的):

https://*.com/questions/55626540/copy-to-clipboard-after-success-in-ajax-call-works-in-chrome-but-not-in-firefox

然后这边由于之前出过一个问题,也是有个按钮触发ajax请求获取一个链接,然后跳转到这个链接,可以看下这个问题的blog:(暂时未发表,待发表再补充)

大概的意思是safari这边会有个用户行为的时间判断,比如你要点击个按钮后弹窗,然后超过限定的时间然后去弹窗就会当做不是用户的行为,则需要在权限那边开启弹窗允许不然就没有响应,所以这边基于之前的问题也怀疑是类似的问题引起,所以尝试用了ajax同步的方法去做,改成如下:

<button class="btn btn-info" onclick="copyLink()"><i class='fa fa-external-link'></i></button>

<button id="copyLink" style="display:none" class="copy-link"></button>

<script src="~/Content/Scripts/clipboard.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
        initCopyLink();
    });

    function initCopyLink() {
        var clipboard = new ClipboardJS('.copy-link');
        clipboard.on('success', function (e) {
            alert("copy success!");
            e.clearSelection();
        });
        clipboard.on('error', function (e) {
            alert("err:" + JSON.stringify(e));
        });
    }

    function copyLink() {
        $.ajaxSettings.async = false;
        try {
            $.ajax(...,Success(data));
            clickCopyLink();
        }
        catch (error) {
            alert(error);
        }
        finally {
            $.ajaxSettings.async = true;
        }
        
    }

    function Success(data)
    {
        var link = document.getElementById("copyLink");
        link.setAttribute("data-clipboard-text", data);
    }

    function clickCopyLink() {
        var link = document.getElementById("copyLinkBtn");
        link.click();
    }

</script>

然后发现在ipad上可以成功的进行复制了。

结束

        以上就是这个问题的一个过程,如果描述种有不对或者不合理的地方欢迎指出,谢谢!

上一篇:es6中的=>箭头函数


下一篇:PyQT5 (二十九) 关于剪贴板使用 的案例