JavaScript 读取系统和浏览器数据
在日常浏览网页时，经常会看到网站上显示自己的 IP 地址和所在城市，以及当前使用的系统、浏览器名称和版本号等设备信息。因此，今天我将分享一个可以获取浏览器信息的 JS 和实例。如果IP 地址和所在城市需要时间，我将单独写一篇文章来分析。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>浏览器检测</title>
<meta name="description" content="通过Useragent和浏览器环境变量等方式判断浏览器、系统及设备类型，是页面判断检测的常用工具。">
<meta name="keywords" content="Useragent,用户代理,浏览器判断,浏览器类型,浏览器信息">
<script src="Browser.js"></script>
<style>
a{
text-decoration: none;
color: #757575;
}
a:hover{
text-decoration: underline;
}
.wrapper{
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.container{
margin-bottom: 20px;
}
.module .code{
padding: 10px;
margin-bottom: 5px;
background: #f8f8f8;
line-height: 24px;
font-size: 14px;
border-radius: 6px;
}
.module .code p{
margin: 0;
line-height: 20px;
}
.module table{
width: 100%;
margin-bottom: 20px;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
text-align: center;
}
.module thead{
background: #eee;
}
.module th,.module td{
padding: 8px 5px;
line-height: 24px;
border: 1px solid #eee;
}
.mod-foot{
line-height: 40px;
text-align: right;
}
.mod-foot .btn{
position: relative;
display: inline-block;
min-width: 56px;
height: 34px;
background: #fff;
padding: 0 12px;
border: 1px solid #ececec;
border-radius: 6px;
line-height: 34px;
text-decoration: none;
text-align: center;
font-size: 14px;
color: #333;
overflow: hidden;
transition: color .2s,opacity .2s;
font-family: Tahoma,Arial, Helvetica,"Microsoft YaHei";
outline: none;
-webkit-appearance: none;
}
.mod-foot .btn:after {
content: " ";
position: absolute;
width: 100%;
height: 100%;
background: #000;
left: 0;
top: 0;
opacity: 0;
transition: opacity .2s;
border-radius: 6px;
overflow: hidden;
pointer-events: none;
}
.mod-foot .btn span,.mod-foot .btn svg{
vertical-align: middle;
}
.mod-foot .btn svg,.mod-foot .btn svg+span{
position: relative;
top: -1px;
}
.mod-foot .btn:hover {
color: #000;
opacity: 1;
}
.mod-foot .btn:hover:after {
opacity: .02;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="module">
<script>
var info = new Browser();
if(info.device!='Mobile'){
document.writeln('<table>\
<caption><div class="code">'+navigator.userAgent+'</div></caption>\
<thead>\
<tr>\
<th>浏览器</th>\
<th>版本</th>\
<th>内核</th>\
<th>操作系统</th>\
<th>设备</th>\
<th>语言</th>\
</tr>\
</thead>\
<tbody>\
<tr>\
<td>'+info.browser+'</td>\
<td>'+info.version+'</td>\
<td>'+info.engine+'</td>\
<td>'+info.os+' '+info.osVersion+'</td>\
<td>'+info.device+'</td>\
<td>'+info.language+'</td>\
</tr>\
</tbody>\
</table>');
}else{
document.writeln('<table>\
<caption><p>'+navigator.userAgent+'</p></caption>\
<thead>\
<tr>\
<th>浏览器</th>\
<th>版本</th>\
<th>内核</th>\
</tr>\
</thead>\
<tbody>\
<tr>\
<td>'+info.browser+'</td>\
<td>'+info.version+'</td>\
<td>'+info.engine+'</td>\
</tr>\
</tbody>\
</table>');
document.writeln('<table>\
<thead>\
<tr>\
<th>操作系统</th>\
<th>设备</th>\
<th>语言</th>\
</tr>\
</thead>\
<tbody>\
<tr>\
<td>'+info.os+' '+info.osVersion+'</td>\
<td>'+info.device+'</td>\
<td>'+info.language+'</td>\
</tr>\
</tbody>\
</table>');
}
</script>
</div>
</div>
<div class="footer">
<div class="mod-foot">
<a class="btn" href="/">返回首页</a>
</div>
<div class="module">
<script>
document.writeln('\
<div class="code">\
<p>屏幕分辨率的宽：'+window.screen.width+'</p>\
<p>屏幕分辨率的高：'+window.screen.height+'</p>\
<p>屏幕工作区的宽：'+window.screen.availWidth+'</p>\
<p>屏幕工作区的高：'+window.screen.availHeight+'</p>\
<p>网页可见区域宽：'+document.documentElement.clientWidth+'</p>\
<p>网页可见区域高：'+document.documentElement.clientHeight+'</p>\
<p>网页横向滚动宽：'+document.documentElement.scrollLeft+'</p>\
<p>网页纵向滚动高：'+document.documentElement.scrollTop+'</p>\
</div>\
');
</script>
</div>
</div>
</div>
<div style="display: none;">
<script>
document.writeln('<iframe src="https://passer-by.com/browser/stat.html?browser='+info.browser+'&ua='+navigator.userAgent+'" width="" height=""></iframe>');
</script>
</div>
</body>
</html>
THE END
