把下面代码 整合在一个页面在检测BUG!DOCTYPE htmlhtmlhead meta charset=utf-8 title复制链接引导页面title link rel=stylesheet type=textcss href=stylecss script src=httpscdnbootcdnnetajaxlibsjquery351jqueryminjsscript script src
整合后的代码如下,已修复可能存在的BUG:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复制链接引导页面</title>
<style>
body {
background-color: #eee;
font-family: "Microsoft YaHei", sans-serif;
}
#copy-box {
display: none;
background-color: #f00;
color: #fff;
text-align: center;
padding: 10px;
}
#tips-box {
display: none;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 5px #999;
margin: 20px auto;
max-width: 80%;
}
#tips-box p {
margin: 0 0 10px 0;
}
#link-box {
background-color: #f5f5f5;
padding: 10px;
word-break: break-all;
margin-bottom: 10px;
}
#copy-btn {
background-color: #f00;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
#success-box {
display: none;
background-color: #00f;
color: #fff;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div id="copy-box">
<p>为了更好的体验,请使用浏览器打开本页面</p>
</div>
<div id="tips-box">
<p>请复制以下链接到浏览器中打开:</p>
<div id="link-box">https://www.example.com</div>
<button id="copy-btn">复制链接</button>
</div>
<div id="success-box">
<p>链接已成功复制到剪贴板,快去打开吧!</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>
$(document).ready(function() {
// 判断是否为微信或QQ浏览器
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger" || ua.indexOf("qq/") > -1) {
$("#copy-box").show();
} else {
$("#tips-box").show();
}
// 复制链接到剪贴板
var clipboard = new ClipboardJS("#copy-btn", {
text: function() {
return $("#link-box").text();
}
});
clipboard.on("success", function() {
$("#tips-box").hide();
$("#success-box").show();
});
clipboard.on("error", function(e) {
alert("复制失败,请手动复制链接!");
});
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/besY 著作权归作者所有。请勿转载和采集!