获取浏览器信息代码
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.userAgentconst userAgentObj = {browserName: '', // 浏览器名称browserVersion: '', // 浏览器版本osName: '', // 操作系统名称osVersion: '', // 操作系统版本deviceName: '', // 设备名称}for (let key in browserReg) {if (browserReg[key].test(userAgentStr)) {userAgentObj.browserName = keyif (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 = keyif (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()))效果如下
获取用户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." },{ urls: "stun:stun.: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生命周期中发送请求
返回输入如下
OK 大功告成
