JavaScript實現(xiàn)獲取本機IP地址
更新時間：2024年07月01日 16:50:03 作者：@web網(wǎng)頁精選
這篇文章主要介紹了JavaScript實現(xiàn)獲取本機IP地址方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
獲取本機IP地址是前端工程師經常需要處理的問題。
JavaScript 有幾種方法可以獲取客戶端的IP地址。
下面是三種獲取本機IP的方法。
方法1：使用第三方 API
一種獲取客戶端IP地址的最簡單方法是使用第三方API。
可以使用一些免費API，例如ipify.org等來獲取IP地址。
下面的代碼片段展示了如何使用 JavaScript 和 API 獲取本機IP地址。
fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(json => console.log(json.ip));
方法2：使用 WebRTC（需要用戶授權）
WebRTC 是一種 JavaScript API，用于在瀏覽器之間直接傳輸數(shù)據(jù)。
它也可以用于獲取客戶端IP地址。
該方法通常比使用API更快速和可靠。
以下是一些使用 WebRTC 獲取IP地址的代碼。
var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
var pc = new myPeerConnection({iceServers:[]}), noop = function(){};
var localIPs = {};
pc.createDataChannel("");
pc.createOffer().then(function (sdp) {
sdp.sdp.split('\n').forEach(function (line) {
if (line.indexOf('candidate') < 0) return;
line.match(ipRegex).forEach(function (ip) {
localIPs[ip] = true;
});
});
pc.setLocalDescription(sdp, noop, noop);
}).catch(function (reason) {
console.log(reason);
});
var ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/;
var ips = Object.keys(localIPs);
console.log(ips[0]);方法3：使用 DNS 查詢
DNS 是一種用于解析主機名為 IP 地址的系統(tǒng)。
可以使用 JavaScript DNS 查詢來獲取本機IP地址。
下面是如何使用 JavaScript 進行DNS查詢的示例代碼。
var request = new XMLHttpRequest();
request.open('GET', 'https://api.ipify.org?format=json', true);
request.onload = function () {
if (request.status >= 200 && request.status < 400) {
var data = JSON.parse(request.responseText);
console.log(data.ip);
}
};
request.onerror = function () {
console.error('Error occurred during the network request');
};
request.send();總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文將會討論客戶端JavaScript中的錯誤處理。主要介紹JavaScript中的易犯錯誤、錯誤處理、異步代碼編寫等內容。下面就讓我們一起看看如何正確處理JavaScript中的錯誤2017-10-10
uni-app小程序實現(xiàn)微信在線聊天功能(私聊/群聊)
這篇文章主要介紹了uni-app小程序實現(xiàn)微信在線聊天（私聊/群聊）,今天記錄一下項目核心功能的實現(xiàn)過程。頁面UI以及功能邏輯全部來源于微信，即時聊天業(yè)務的實現(xiàn)使用socket.io，前端使用uni-app開發(fā)，后端服務器基于node實現(xiàn)，數(shù)據(jù)庫選擇mongoDB，需要的朋友可以參考下2023-02-02
uniapp如何手動實現(xiàn)讓input文本框聚焦效果
最近使用uniapp做一個評論的功能,遇到一個需求就是點擊上面的評論圖標,讓定位在底部的input框聚焦,下面這篇文章主要給大家介紹了關于uniapp如何手動實現(xiàn)讓input文本框聚焦效果的相關資料,需要的朋友可以參考下2023-12-12
這是來自http://www.quirksmode.org/js/this.html這篇文章里對this的定義，直接看定義似乎什么也不知道，下面通過實例來說明各種情況下this所指代的對象以及原理。2008-10-10
這篇文章主要介紹了Electron實現(xiàn)應用打包、自動升級過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
一文讀懂JS中的var/let/const和暫時性死區(qū)
這篇文章主要為大家詳細介紹了JavaScript中的var、let、const和暫時性死區(qū)的異同，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2023-02-02
本文主要介紹了javascript的容錯處理代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
js實現(xiàn)用戶離開頁面前提示是否離開此頁面的方法（包括瀏覽器按鈕事件）
這篇文章主要介紹了js實現(xiàn)用戶離開頁面前提示是否離開此頁面的方法,較為詳細的分析了javascript針對瀏覽器事件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了js文本框跑馬燈效果，功能實現(xiàn)非常簡單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)數(shù)字跳動到指定數(shù)字，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08