实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<title>js兼容安卓和ios实现粘贴板一键复制</title>
<style>
html {
color: #000;
background: #fff;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html * {
outline: 0;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: transparent
}
* {
margin: 0;
padding: 0
}
.content {
78.7%;
height: 11.093rem;
margin: 0 auto;
background: url('./xxxxxx.png');
background-size: 100% 100%;
margin-top: 20%;
}
.onebox{
height: 8.907rem;
}
.midtext{
font-family: PingFangSC-Regular;
font-size: 12px;
color: #4FA3FF;
letter-spacing: 0;
text-align: left;
66%;
padding-top: 8.0rem;
margin: 0 auto;
}
.bottbox{
text-align: center;
font-size: 0;
margin-top: 0.693rem;
}
.one-copy{
3.467rem;
height: 0.853rem;
}
/*小弹窗*/
#message{
27%;
height: 0.8rem;
line-height: 0.8rem;
bottom: 50%;
font-size: 12px;
color: #fff;
z-index: 99;
box-shadow: 0 1px 14px rgba(0,0,0,.24);
opacity: 0;
visibility: hidden;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
border-radius: 0.8rem;
}
#message.show {
visibility: visible;
}
#message {
position: fixed;
background: rgba(0,0,0,.6);
left: 50%;
}
#msgTxt{
line-height:1.55rem;
height: 3.1rem;
}
.show {
display: block!important;
}
</style>
</head>
<script type="text/javascript">
document.getElementsByTagName("html")[0].style.fontSize = (window.innerWidth / 10) + "px";
</script>
<body>
<div class="content">
<div class="onebox">
<div class="midtext">https://ahhahahahhahahah</div>
</div>
<div class="bottbox"><img src="./ccccccc.png" class="one-copy" id="one-copy" onclick="copy()"></div>
</div>
<!-- 弹窗组件 -->
<div id="message" class="show">
<p id="mytext"></p >
</div>
</body>
<script type="text/javascript">
//兼容安卓和ios实现剪切板复制的方法
function copy() {
var message="https://ajskajskajskajskjaskajksjka";
var input = document.createElement("input");
input.value = message;
document.body.appendChild(input);
input.select();
input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
document.body.removeChild(input);
//一键复制按钮变浅
document.querySelector("#one-copy").style.opacity='0.5';
//复制成功提示
toast('复制成功');
}
//弹窗组件
function toast(message) {
var timer;
document.querySelector("#message").style.opacity='1';
document.getElementById('mytext').innerHTML=message;
clearTimeout(timer);
timer = setTimeout( ()=> {
document.querySelector("#message").style.opacity='0';
}, 2000);
}
</script>
</html>
略。