JavaScript獲取本機IP地址三種常用方式
更新時間：2023年12月09日 08:44:59 作者：半獸先生
在瀏覽器中使用JavaScript獲取本機IP地址是不可行的,因為瀏覽器的安全策略禁止JavaScript訪問這樣的信息,這篇文章主要給大家介紹了關(guān)于JavaScript獲取本機IP地址的三種常用方式,需要的朋友可以參考下
獲取本機IP地址是前端工程師經(jīng)常需要處理的問題。JavaScript 有幾種方法可以獲取客戶端的IP地址。下面是三種獲取本機IP的方法。
方法1：使用第三方 API
一種獲取客戶端IP地址的最簡單方法是使用第三方API?？梢允褂靡恍┟赓MAPI，例如ipify.org等來獲取IP地址。下面的代碼片段展示了如何使用 JavaScript 和 API 獲取本機IP地址。
<code>
fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(json => console.log(json.ip));
</code>方法2：使用 WebRTC（需要用戶授權(quán)）
WebRTC 是一種 JavaScript API，用于在瀏覽器之間直接傳輸數(shù)據(jù)。它也可以用于獲取客戶端IP地址。該方法通常比使用API更快速和可靠。以下是一些使用 WebRTC 獲取IP地址的代碼。
<code>
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]);
</code>方法3：使用 DNS 查詢
DNS 是一種用于解析主機名為 IP 地址的系統(tǒng)?？梢允褂?JavaScript DNS 查詢來獲取本機IP地址。下面是如何使用 JavaScript 進(jìn)行DNS查詢的示例代碼。
<code>
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();
</code>總結(jié)
到此這篇關(guān)于JavaScript獲取本機IP地址三種常用方式的文章就介紹到這了,更多相關(guān)JS獲取本機IP地址內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如何利用Three.js實現(xiàn)web端顯示點云數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于如何利用Three.js實現(xiàn)web端顯示點云數(shù)據(jù)的相關(guān)資料,最近在項目中遇到需求,需要在web端顯示點云數(shù)據(jù),將我的實現(xiàn)步驟介紹在這里供大家參考,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了TypeScript中的類型保護(hù)，對類型保護(hù)感興趣的同學(xué)，可以參考下2021-04-04
在Angular中，最好在一個頂級模塊中加載和配置路由，它專注于路由功能，然后由根模塊AppModule導(dǎo)入它，最后還有初始化并監(jiān)聽瀏覽器的地址變化2023-01-01
Javascript防止圖片拉伸的自適應(yīng)處理方法
這篇文章主要給大家介紹了關(guān)于利用Javascript防止圖片拉伸的自適應(yīng)處理方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
使用JavaScript實現(xiàn)命名空間就沒有這么舒服了，Javascript只有函數(shù)作用域，什么塊兒啊、神馬文件啊統(tǒng)統(tǒng)都認(rèn)為是一個命名空間的，有時候因為一些重名問題導(dǎo)致的錯誤讓人莫名其妙，難以調(diào)試解決2013-08-08
在現(xiàn)代Web應(yīng)用中,大文件上傳是一個常見的需求,尤其是在云存儲、社交媒體和協(xié)作平臺等領(lǐng)域,這篇文章主要介紹了前端如何寫一個大文件上傳組件詳細(xì)步驟,需要的朋友可以參考下2025-04-04
在Web開發(fā)中,JavaScript與服務(wù)器進(jìn)行數(shù)據(jù)交互是核心需求之一,本文將詳細(xì)解析JavaScript發(fā)送請求的常用方法,幫助開發(fā)者根據(jù)場景選擇最適合的方案,需要的朋友可以參考下2026-03-03
這篇文章主要介紹了微信小程序API獲取定位，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
javascript判斷網(wǎng)頁是關(guān)閉還是刷新
本篇文章給大家介紹js判斷網(wǎng)頁是關(guān)閉還是刷新，實現(xiàn)原理就是通過離開頁面行為時間onunload觸發(fā)時間去檢測此時的瀏覽器的窗口大小，根據(jù)大小由此判斷用戶是刷新，跳轉(zhuǎn)或是關(guān)閉行為程序，需要的朋友可以參考下本文2015-09-09
JS實現(xiàn)仿UC瀏覽器前進(jìn)后退效果的實例代碼
這篇文章主要介紹了JS實現(xiàn)仿UC瀏覽器前進(jìn)后退效果的實例代碼，實現(xiàn)此功能前需要先測試下瀏覽器，具體實例代碼，大家參考下本文2017-07-07