js复制到clipboard，pc正常，safari未响应How?问题：复制功能PC上正常，IPad上Safari未响应解决步骤：结束

92 阅读 0 评论 61 点赞

我是靠谱客的博主微笑薯片，最近开发中收集的这篇文章主要介绍js复制到clipboard，pc正常，safari未响应How?问题：复制功能PC上正常，IPad上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://stackoverflow.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上可以成功的进行复制了。