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地址輸出到控制台。