如果把域名发送在微信或者QQ中引导用户复制链接到手机或者PC浏览器浏览如果用户正常用PC或者手机浏览器打开域名则正常打开域名用html+jq+css
可以实现以下功能:
-
判断用户的浏览器类型是否为微信或QQ,如果是,则显示引导复制链接的提示信息。
-
点击提示信息中的“复制链接”按钮,将域名复制到用户的剪贴板中。
-
在复制成功后,显示一个提示信息告诉用户已经成功复制链接。
-
用户在浏览器中打开域名时,直接跳转到对应的网页。
以下是代码示例:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复制链接引导页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="clipboard.min.js"></script>
<script src="script.js"></script>
</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>
</body>
</html>
CSS代码:
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;
}
JavaScript代码:
$(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("复制失败,请手动复制链接!");
});
});
说明:
-
在HTML代码中,我们使用了三个div分别代表了引导复制链接的提示信息、复制链接的提示信息和链接复制成功的提示信息。
-
在CSS代码中,我们设置了这三个div的样式。
-
在JavaScript代码中,我们使用了Clipboard.js库来实现复制链接到剪贴板的功能,使用了jQuery库来简化DOM操作。我们首先判断用户的浏览器类型,如果是微信或QQ,则显示引导复制链接的提示信息;如果是其他浏览器,则显示复制链接的提示信息。当用户点击复制链接按钮时,我们使用Clipboard.js库将链接复制到剪贴板中,并显示链接复制成功的提示信息。
-
在使用该代码时,需要将Clipboard.js库和相关的CSS文件和JavaScript文件导入到项目中,并将https://www.example.com替换为实际的域名。
原文地址: https://www.cveoy.top/t/topic/besN 著作权归作者所有。请勿转载和采集!