js获取用户浏览器信息和ip地址以及位置

获取浏览器信息代码

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()))

效果如下

 

获取用户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生命周期中发送请求

 返回输入如下

 

 OK 大功告成