检测用户体验感,写出优化后的代码 - 优化浏览器兼容性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳转页面</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
body{
text-align: center;
padding-top: 100px;
}
h1{
font-size: 36px;
margin-bottom: 30px;
}
button{
padding: 10px 20px;
font-size: 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
p{
font-size: 20px;
margin-top: 30px;
}
input{
width: 80%;
font-size: 16px;
padding: 10px;
margin-top: 20px;
border: none;
}
button.copy{
margin-top: 20px;
background-color: #28a745;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<h1>请使用手机自带浏览器打开此页面</h1>
<button id="open">点击打开</button>
<p id="copyBtn" class="hidden">点击下方按钮复制链接</p>
<input type="text" id="url" value="" class="hidden">
<button class="copy hidden" onclick="copy()">复制链接</button>
<script>
$(function() { // 等待页面加载完成后再执行代码
var ua = navigator.userAgent.toLowerCase();
var isWechat = ua.indexOf('micromessenger') != -1;
var isQQ = ua.indexOf('qq/') != -1;
if (isWechat || isQQ) {
$('#open').on('click', function(){
alert('请使用手机自带浏览器打开此页面');
$('#copyBtn').removeClass('hidden');
$('#url').removeClass('hidden');
$('#url').val(window.location.href);
$('.copy').removeClass('hidden');
});
} else {
window.location.href = 'http://www.example.com'; //此处替换为需要跳转的页面链接
}
});
<pre><code> function copy(){
var url = document.getElementById("url");
url.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好,可贴粘。");
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/mFrS 著作权归作者所有。请勿转载和采集!