原生js 实现获取本机ip地址

在浏览器中使用 JavaScript 获取本机 IP 地址是不可行的，因为浏览器的安全策略禁止 JavaScript 访问这样的信息。但是，可以使用 WebRTC 技术实现获取 IP 地址。

以下是一个使用 WebRTC 技术获取本机 IP 地址的示例代码：

// 获取本机IP地址
function getLocalIP(callback) {
  var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;

  if (RTCPeerConnection) {
    var rtc = new RTCPeerConnection({iceServers:[]});

    if (1 || window.mozRTCPeerConnection) {
      rtc.createDataChannel('', {reliable:false});
    };
    
    rtc.onicecandidate = function(evt) {
      if (evt.candidate) grepSDP("a="+evt.candidate.candidate);
    };
    rtc.createOffer(function(offerDesc) {
      grepSDP(offerDesc.sdp);
      rtc.setLocalDescription(offerDesc);
    }, function(e) {});
    
    var addrs = Object.create(null);
    addrs["0.0.0.0"] = false;
    
    function grepSDP(sdp) {
      var hosts = [];
      sdp.split('\r\n').forEach(function(line, index, arr) { 
        if (~line.indexOf("a=candidate")) {    
          var parts = line.split(' '),       
          addr = parts[4],
          type = parts[7];
          if (type === 'host') updateDisplay(addr);
        } else if (~line.indexOf("c=")) {       
          var parts = line.split(' '),       
          addr = parts[2];
          updateDisplay(addr);
        }
      });
    }
    
    function updateDisplay(newAddr) {
      if (newAddr in addrs) return;
      else addrs[newAddr] = true;
      callback(newAddr);
    }
  } else {
    callback(null);
  }
}

此代码创建一个 RTCPeerConnection 对象，并使用 createDataChannel() 方法创建一个数据通道。然后，它创建一个 offer 并将其设置为本地描述。onicecandidate 事件处理程序将捕获候选项并将其传递给 grepSDP() 函数。grepSDP() 函数检查候选项以查找主机地址，并将其传递给 updateDisplay() 函数。updateDisplay() 函数将地址添加到 addrs 对象中，并将其传递给回调函数。

在你的 HTML 文件中，你可以调用 getLocalIP() 函数，并传递一个回调函数来接收本机 IP 地址。例如：

getLocalIP(function(ip) {
  console.log("本机IP地址：" + ip);
});