上文使用的代码经过多个系统版本ios测试还是不生效,网上的方法都试过,ios手机还是不生效,就算demo生效,但是由于实际业务代码一些样式等影响或者其他原因,业务功能复制链接在ios手机还是显示不兼容,ios估计只能对于页面显示的内容进行复制,传值复制无法生效。无奈只能改成弹窗形式,再进行点击复制,使用的weui弹窗。需要引入weiui的js和css。
<script type="text/javascript" th:src="@{/weui/js/zepto.weui.js}"></script>
<script type="text/javascript" th:src="@{/weui/js/zepto.min.js}"></script>
<link rel="stylesheet" th:href="@{/weui/css/weui.css}"/>
<link rel="stylesheet" th:href="@{/weui/css/weuix.css}"/>
引入weiui的弹窗,ios会有一个样式问题,弹窗会显示再页面的左侧,调整样式即可,根据自己实际情况调整
<style>
.weui-dialog{
left: 50%;
width: 80%;
}
.weui-dialog__hd {
padding: 10px 24px 10px;
}
.weui-dialog__bd{
margin-bottom: 10px;
font-size: 13px;
}
.weui-dialog__ft{
line-height: 46px;
min-height: 46px;
}
</style>
<div class="btnBox">
<button id="copy" class="btn btnRed btnSixeL" onclick="copyLink()">复制链接</button>
<div id="backBtn" class="btn btnYes btnSixeL marTop20" onclick="window.history.back()">返回</div>
</div>
<script type="text/javascript">
function copyLink() {
// 调用后端查询该id的有效链接,无效则后端生成返回
const stockAuthId = $('input[name="radio"]:checked').val();
if(isBlank(stockAuthId)){
return layer.msg("请选择股东", {icon: 2},{time:1000});
}
$.showLoading("正在生成链接");
// 查询linkUrl
const url = pcs.common.path + 后端api接口;
$.post(url,{},function(data){
if(data.code === 200){
$.hideLoading();
copy(data.rs);
}else{
$.hideLoading();
return layer.msg(data.msg, {icon: 2},{time:1000});
}
},'json');
}
function copy(text){
if(navigator.clipboard){
navigator.clipboard.writeText(text).then(function(){
layer.msg("复制成功");
},function(){
copy2(text);
});
}else{
copy2(text);
}
}
function copy2(text){
if((navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))){
// ios系统
$.modal({
text: text,
buttons: [{
text: "点击复制", onClick: function(){
finalCopy(text);
}
}]
});
}else {
// 其他机型或者浏览器
finalCopy(text);
}
}
function finalCopy(text){
const input = document.createElement("INPUT");
input.value = text;
input.className = "";
document.body.appendChild(input);
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
layer.msg("复制成功");
}
document.body.removeChild(input);
}
</script>