JavaScript获取本地IP的几种方法

一、从JavaScript获取本地IP地址

JavaScript可以通过WebRTC的API获取本地IP地址。WebRTC（Web Real-Time Communication）是一种浏览器间点对点的实时通信技术，是基于NAT（Network Address Translation）技术的。

下面是从JavaScript获取本地IP地址的示例：

<script>
  window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;

  var pc = new RTCPeerConnection({iceServers:[]}), s = () => ['192.168.2.1'];
  pc.createDataChannel('');
  pc.createOffer(pc.setLocalDescription.bind(pc), s);
  pc.onicecandidate = function(ice) {
    if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(/typ host/g)) return;
    document.getElementById('local-ip').innerHTML = (ice.candidate.candidate.match(/([0-9]{1,3}\.){3}[0-9]{1,3}/g))[0];
    pc.onicecandidate = () => {};
  };
</script>

<div id="local-ip"></div>

上面代码通过RTCPeerConnection创建一个对等连接，并通过setLocalDescription()设置一个本地描述和一些空的ICE服务器对象，然后创建了一个数据信道。使用createOffer()创建了一个offer，并将本地描述设置为offer；然后onicecandidate事件会将获取到的IP地址赋值给div元素中。

二、从JavaScript获取本地IP地址和主机名称

通过网络接口信息获取本地IP地址和主机名称。这种方法需要通过Node.js，在浏览器端无法使用。

示例代码如下：

const os = require('os');

const interfaces = os.networkInterfaces();

for (const interfaceName in interfaces) {
  const interface = interfaces[interfaceName];

  for (let i = 0; i < interface.length; i++) {
    const alias = interface[i];

    if (alias.family !== 'IPv4' || alias.internal !== false) {
      continue;
    }

    console.log(`Interface: ${interfaceName}, Address: ${alias.address}, Hostname: ${os.hostname()}`);
  }
}

上面的代码通过os模块获取本地网络接口信息，并遍历获取IPv4地址和主机名。

三、从JavaScript获取本地IP地址知乎

在知乎上有用户分享了一个获取本地IP地址的JavaScript代码。示例代码如下：

function find(ip, mask) {
  var ips = ip.split('.');
  var masks = mask.split('.');
  var result = [];
  for(var i=0; i<ips.length; i++) {
    var ip = parseInt(ips[i]);
    var mask = parseInt(masks[i]);
    result.push(ip & mask);
  }
  return result.join('.');
}

function getIPs(callback) {
  var ips = [];
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://www.zhihu.com/cdn-cgi/trace', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var text = xhr.responseText;
      var lines = text.split('\n');
      for(var i=0; i<lines.length; i++) {
        var line = lines[i].trim();
        if(line.startsWith('ip=')) {
          var ip = line.substring(3);
          var mask = '255.255.255.0';
          ips.push(find(ip, mask));
        }
      }
      callback(ips);
    }
  };
  xhr.send();
}

getIPs(function(ips) {
  console.log(ips.join(', '));
});

该代码通过XMLHttpRequest从知乎的CDN获取本地IP地址，在获取到IP地址后进行处理并输出。

四、从JavaScript获取本地文件

可以使用File API从浏览器本地文件系统访问本地文件。使用FileReader API，可以读取文件内容并以文本或URL等形式输出。下面是一个简单的示例：

  function readFile(input) {
    var reader = new FileReader();
    reader.onload = function() {
      console.log(reader.result);
    };
    reader.readAsText(input.files[0]);
  }

上面代码中，使用了一个input元素，当用户选择文件后，调用readFile()函数。该函数使用FileReader API读取文件内容，并输出到控制台。

五、从JavaScript获取本地图片

如果需要从浏览器本地文件系统中获取图片文件，可以使用Canvas API。下面是一个简单的示例：

  function loadImage(input) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var image = new Image();
    image.onload = function() {
      canvas.width = image.width;
      canvas.height = image.height;
      context.drawImage(image, 0, 0);
      var dataUrl = canvas.toDataURL('image/png');
      console.log(dataUrl);
    };
    image.src = URL.createObjectURL(input.files[0]);
  }

上面代码中，使用了一个input元素，当用户选择图片后，调用loadImage()函数。该函数使用Canvas API绘制图片到画布上，并将处理后的图片输出为data URL格式的字符串。

六、通过Vue获取本地IP

Vue.js是一个MVVM（Model-View-ViewModel）框架，用于构建动态Web界面。Vue.js提供了一种MVVM的渐进式框架，并支持组件化开发。下面是一个使用Vue.js获取本地IP的示例：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  Your IP address is: {{ ip }}
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      ip: null
    },
    mounted() {
      this.getIP();
    },
    methods: {
      getIP() {
        axios.get('https://api.ipify.org?format=json').then(response => {
          this.ip = response.data.ip;
        });
      }
    }
  });
</script>

上面代码中，使用了Vue.js通过axios调用API获取本地IP，并将IP地址输出为数据绑定绑定到div元素。

七、前端获取本地IP地址

可以使用XMLHttpRequest调用REST API获取本地IP地址。下面是一个使用XMLHttpRequest获取本地IP地址的示例：

<div id="ip"></div>

<script>
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      var result = JSON.parse(xhr.responseText);
      document.getElementById('ip').innerHTML = result.ip;
    }
  };
  xhr.open('GET', 'https://api.ipify.org?format=json', true);
  xhr.send();
</script>

上面代码中，使用XMLHttpRequest调用REST API获取本地IP地址，并将结果输出到div元素。

八、通过JavaScript获取当前IP地址

可以通过location对象获取当前访问页面的IP地址。下面是一个获取当前IP地址的示例：

Your IP address is: <span id="ip"></span>

<script>
  var ipAddress = location.hostname;
  document.getElementById('ip').innerHTML = ipAddress;
</script>

上面代码中，使用location对象获取当前访问页面的IP地址，并将IP地址输出到span元素。

九、从JavaScript获取用户的IP地址

可以使用JavaScript在浏览器端获取用户的IP地址。下面是一个获取用户IP地址的示例：

<script>
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.async = true;
  script.src = 'https://ipv4.myexternalip.com/jsonp/';
  var ref = document.getElementsByTagName('script')[0];
  ref.parentNode.insertBefore(script, ref);
  function callback(json) {
    var ipAddress = json.ip;
    console.log(ipAddress);
  }
</script>

上面代码中，使用了一个外部脚本获取JSON格式的用户IP地址，并将IP地址输出到控制台。