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等,所以即使捕获到也看不出啥来。然后就去查下有没有相关的东西,有参考了以下这个(感觉算是比较接近的):
然后这边由于之前出过一个问题,也是有个按钮触发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上可以成功的进行复制了。
结束
以上就是这个问题的一个过程,如果描述种有不对或者不合理的地方欢迎指出,谢谢!