JS獲取用戶訪問網(wǎng)頁的瀏覽器數(shù)據(jù)和IP地址信息

更新時間：2025年08月26日 08:57:50 作者：叫我+V

這篇文章主要為大家詳細(xì)介紹了如何使用JS實現(xiàn)獲取用戶訪問網(wǎng)頁的瀏覽器數(shù)據(jù)和IP地址信息,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下

因為我們這個只需要統(tǒng)計訪問的那個頁面就可以，不需要記錄具體點擊了那些功能，所以就只需要想辦法獲取用戶訪問的瀏覽器類型、版本、用戶訪問的IP地址、用戶的所在城市、訪問時間、訪問路徑。這幾個數(shù)據(jù)就可以啦！

PS：不讓我們使用百度統(tǒng)計這種三方網(wǎng)站，如果可以使用百度統(tǒng)計的話，賊拉拉簡單。

獲取瀏覽器數(shù)據(jù)

獲取訪問設(shè)備信息就很簡單，直接下面這個方法，在項目里封裝一下直接調(diào)用就可以啦：

// 獲取用戶訪問瀏覽器設(shè)備信息
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: '', // 操作系統(tǒng)名稱
    osVersion: '', // 操作系統(tǒng)版本
    deviceName: '', // 設(shè)備名稱
  }
  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
}

看一下執(zhí)行后的效果：

獲取用戶訪問的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;
    }
  }
  // 網(wǎng)絡(luò)協(xié)商的過程
  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);
}

調(diào)用的話也很簡單：

getIPs((ip) => {
  console.log('ip ----> ', ip);
})

看一下效果：

能夠打印出外網(wǎng)的IP地址。

獲取用戶的位置數(shù)據(jù)

這個比較麻煩，也不麻煩其實，有第三方的API可以使用，但是我寫博文的這段時間測試了一些，網(wǎng)上說的很多方式都不能用了，有的可以用，但是需要登錄獲取token，而且還有訪問次數(shù)限制。

我找了一個比較簡單的，不需要登錄也不需要token：

// 獲取用戶訪問位置
function getLocation() {
  fetch('https://ipapi.co/json/')
    .then(res => {
      return res.json();
    }).then(userLocation => {
      console.log("用戶位置---> ", userLocation);
    }).catch(err => {
      console.log(err);
    })
}

然后調(diào)用一下看一下效果：