整合后的代码如下,已修复可能存在的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>
把下面代码 整合在一个页面在检测BUG!DOCTYPE htmlhtmlhead	meta charset=utf-8	title复制链接引导页面title	link rel=stylesheet type=textcss href=stylecss	script src=httpscdnbootcdnnetajaxlibsjquery351jqueryminjsscript	script src

原文地址: https://www.cveoy.top/t/topic/besY 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录