@cxy227/browser-detection
Version:
98 lines (88 loc) • 4.01 kB
HTML
<!-- MVP.css quickstart template: https://github.com/andybrewer/mvp/ -->
<html lang="en">
<head>
<link rel="icon" href="https://via.placeholder.com/70x70">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cxy227/browser-detection@0.1.1/example/mvp.css">
<meta charset="utf-8">
<meta name="description" content="My description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My title</title>
<script src="https://cdn.jsdelivr.net/npm/us-utils-asyncloadscript@1.1.3/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<!-- <script id="drowserDetection" data-check="auto" src="/dist/index.js?t=14"></script> -->
</head>
<body>
<header>
<nav>
<a href="/"><img alt="Logo" src="https://via.placeholder.com/200x70?text=Logo" height="70"></a>
<ul>
<li>Menu Item 1</li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Dropdown Menu Item</a>
<ul>
<li><a href="#">Sublink with a long name</a></li>
<li><a href="#">Short sublink</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
<hr>
<p>
<small>Contact info</small>
</p>
</footer>
<script>
const data = [
'{"name":"Chrome","version":"94","os":"Mac OS X","userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36"}',
'{"name":"Chrome","version":"78","os":"Mac OS X","userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36", "remark": "360极速版[不支持??]"}',
]
function init() {
var test = new Test({
fatherEle: document.querySelector('main'),
buttons: [
{ id: 'name', text: '当前浏览器' },
{ id: 'version', text: '当前浏览器版本' },
{ id: 'os', text: '当前操作系统' },
{ id: 'brand', text: '浏览器盒子' },
{ id: 'download', text: '下载Edget浏览器' },
],
table: {
column: ['name', 'version', 'os', 'remark', 'userAgent'],
},
})
console.log('browserDetection: ', browserDetection)
const bd = new browserDetection()
// const bd = { info: {} }
test.getClass('#name b').innerHTML = `当前浏览器: ${bd.info.name}`
test.getClass('#version i').innerHTML = `当前版本: ${bd.info.version}`
test.getClass('#os b').innerHTML = `当前设备: ${bd.info.os}`
test.getClass('#brand i').innerHTML = `浏览器盒子: ${bd.info.brand}`
test.getClass('#download').href = 'https://www.microsoft.com/zh-cn/edge'
test.getClass('#download').target = '_blank'
data.forEach(item => {
const line = JSON.parse(item)
test.addTableLine({
name: line.name,
version: line.version,
os: line.os,
// userAgent: line.userAgent.split(/\s\(|\)\s/),
userAgent: line.userAgent,
remark: line.remark || '本人测试'
})
})
}
window.addEventListener('load', () => {
if (window.GlobalLoadScript) {
window.GlobalLoadScript()('/dist/index.js?t=' + new Date(), () => {
window.GlobalLoadScript()('/example/test.js?t=' + new Date(), init)
})
}
});
</script>
</body>
</html>