获取浏览器信息代码
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 } console.log(JSON.stringify(userAgent()))
效果如下
文章来源地址https://www.toymoban.com/news/detail-512688.html
获取用户ip地址代码
const 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(""); //创建一个SDP(session description protocol)会话描述协议 是一个纯文本信息 包含了媒体和网络协商的信息 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地址后拼接到url上,然后发送请求获取返回的数据
这里是在 vue中created生命周期中发送请求
返回输入如下
文章来源:https://www.toymoban.com/news/detail-512688.html
OK 大功告成
到了这里,关于js获取用户浏览器信息和ip地址以及位置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!