JS获取用户访问网页的浏览器数据和IP地址信息
作者：叫我+V
这篇文章主要为大家详细介绍了如何使用JS实现获取用户访问网页的浏览器数据和IP地址信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
要做一个网站统计功能，需要获取用户访问的浏览器类型、版本、用户访问的IP地址、用户的所在城市、访问时间、访问路径。
因为我们这个只需要统计访问的那个页面就可以，不需要记录具体点击了那些功能，所以就只需要想办法获取用户访问的浏览器类型、版本、用户访问的IP地址、用户的所在城市、访问时间、访问路径。这几个数据就可以啦！
PS：不让我们使用百度统计这种三方网站，如果可以使用百度统计的话，贼拉拉简单。
获取浏览器数据
获取访问设备信息就很简单，直接下面这个方法，在项目里封装一下直接调用就可以啦：
// 获取用户访问浏览器设备信息
function userAgent() {
let browserReg = {
Chrome: /Chrome/,
IE: /MSIE/,
Firefox: /Firefox/,
Opera: /Presto/,
Safari: /Version\/([\d.]+).*Safari/,
'360': /360SE/,
QQBrowswe: /QQ/,
Edge: /Edg/
};
let deviceReg = {
iPhone: /iPhone/,
iPad: /iPad/,
Android: /Android/,
Windows: /Windows/,
Mac: /Macintosh/,
};
let userAgentStr = navigator.userAgent
const userAgentObj = {
browserName: '', // 浏览器名称
browserVersion: '', // 浏览器版本
osName: '', // 操作系统名称
osVersion: '', // 操作系统版本
deviceName: '', // 设备名称
}
for (let key in browserReg) {
if (browserReg[key].test(userAgentStr)) {
userAgentObj.browserName = key
if (key === 'Chrome') {
userAgentObj.browserVersion = userAgentStr.split('Chrome/')[1].split(' ')[0]
} else if (key === 'IE') {
userAgentObj.browserVersion = userAgentStr.split('MSIE ')[1].split(' ')[1]
} else if (key === 'Firefox') {
userAgentObj.browserVersion = userAgentStr.split('Firefox/')[1]
} else if (key === 'Opera') {
userAgentObj.browserVersion = userAgentStr.split('Version/')[1]
} else if (key === 'Safari') {
userAgentObj.browserVersion = userAgentStr.split('Version/')[1].split(' ')[0]
} else if (key === '360') {
userAgentObj.browserVersion = ''
} else if (key === 'QQBrowswe') {
userAgentObj.browserVersion = userAgentStr.split('Version/')[1].split(' ')[0]
} else if (key === 'Edge') {
userAgentObj.browserVersion = userAgentStr.split('Edg/')[1].split(' ')[0]
}
}
}
for (let key in deviceReg) {
if (deviceReg[key].test(userAgentStr)) {
userAgentObj.osName = key
if (key === 'Windows') {
userAgentObj.osVersion = userAgentStr.split('Windows NT ')[1].split(';')[0]
} else if (key === 'Mac') {
userAgentObj.osVersion = userAgentStr.split('Mac OS X ')[1].split(')')[0]
} else if (key === 'iPhone') {
userAgentObj.osVersion = userAgentStr.split('iPhone OS ')[1].split(' ')[0]
} else if (key === 'iPad') {
userAgentObj.osVersion = userAgentStr.split('iPad; CPU OS ')[1].split(' ')[0]
} else if (key === 'Android') {
userAgentObj.osVersion = userAgentStr.split('Android ')[1].split(';')[0]
userAgentObj.deviceName = userAgentStr.split('(Linux; Android ')[1].split('; ')[1].split(' Build')[0]
}
}
}
return userAgentObj
}
看一下执行后的效果：
获取用户访问的IP地址
这个也很简单：
// 获取用户访问IP地址
function getIPs(callback) {
var ip_dups = {};
var RTCPeerConnection = window.RTCPeerConnection
|| window.mozRTCPeerConnection
|| window.webkitRTCPeerConnection;
var useWebKit = !!window.webkitRTCPeerConnection;
var mediaConstraints = {
optional: [{ RtpDataChannels: true }]
};
// 这里就是需要的ICEServer了
var servers = {
iceServers: [
{ urls: "stun:stun.services.mozilla.com" },
{ urls: "stun:stun.l.google.com:19302" },
]
};
var pc = new RTCPeerConnection(servers, mediaConstraints);
function handleCandidate(candidate) {
var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/
var hasIp = ip_regex.exec(candidate)
if (hasIp) {
var ip_addr = ip_regex.exec(candidate)[1];
if (ip_dups[ip_addr] === undefined)
callback(ip_addr);
ip_dups[ip_addr] = true;
}
}
// 网络协商的过程
pc.onicecandidate = function (ice) {
if (ice.candidate) {
handleCandidate(ice.candidate.candidate);
}
};
pc.createDataChannel("");
pc.createOffer(function (result) {
pc.setLocalDescription(result, function () { }, function () { });
}, function () { });
setTimeout(function () {
var lines = pc.localDescription.sdp.split('\n');
lines.forEach(function (line) {
if (line.indexOf('a=candidate:') === 0)
handleCandidate(line);
});
}, 1000);
}
调用的话也很简单：
getIPs((ip) => {
console.log('ip ----> ', ip);
})
看一下效果：
能够打印出外网的IP地址。
获取用户的位置数据
这个比较麻烦，也不麻烦其实，有第三方的API可以使用，但是我写博文的这段时间测试了一些，网上说的很多方式都不能用了，有的可以用，但是需要登录获取token，而且还有访问次数限制。
我找了一个比较简单的，不需要登录也不需要token：
// 获取用户访问位置
function getLocation() {
fetch('https://ipapi.co/json/')
.then(res => {
return res.json();
}).then(userLocation => {
console.log("用户位置---> ", userLocation);
}).catch(err => {
console.log(err);
})
}
然后调用一下看一下效果：
基本上是没有什么问题的。
注意：
没有必要每次切换的时候都获取一遍，我们可以在最开始获取一次，然后存入 sessionStorage 里面，下次使用的时候直接从 sessionStorage 里面获取就行，这样也能比较好的减少请求次数，万一这个网站也有访问次数限制。
到此这篇关于JS获取用户访问网页的浏览器数据和IP地址信息的文章就介绍到这了,更多相关JS获取网页信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！