JavaScript實現(xiàn)獲取本機IP地址
更新時間：2024年07月01日 16:50:03 作者：@web網(wǎng)頁精選
這篇文章主要介紹了JavaScript實現(xiàn)獲取本機IP地址方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
獲取本機IP地址是前端工程師經(jīng)常需要處理的問題。
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（需要用戶授權(quán)）
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();總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
layui-table表復選框勾選的所有行數(shù)據(jù)獲取的例子
今天小編就為大家分享一篇layui-table表復選框勾選的所有行數(shù)據(jù)獲取的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js 利用image對象實現(xiàn)圖片的預加載提高訪問速度
我們來學習一種名為圖像預裝載（image preloading）的小技巧來提高圖像訪問速度，一些瀏覽器試圖通過在本地緩存中保存這些圖片來解決此問題，感興趣的朋友可以了解下2013-03-03
TS報錯:Parameter?'xxx'?implicitly?has?an?'
這篇文章主要給大家介紹了關(guān)于TS報錯:Parameter?'xxx'?implicitly?has?an?'any'?type的解決方式,文中將產(chǎn)生錯誤的原因及解決方法都介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)屏幕滾動效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
JS操作XML實例總結(jié)(加載與解析XML文件、字符串)
這篇文章主要介紹了JS操作XML的方法,結(jié)合實例形式總結(jié)分析了JavaScript加載與解析XML文件及字符串的相關(guān)技巧,需要的朋友可以參考下2015-12-12
uni-app的nvue說白了就是weex的那一套東西，uni-app集成了weex的 SDK，也就實現(xiàn)了App端的原生渲染能力。本文將介紹uniapp遇到的一些坑，分享給大家。2021-06-06
這篇文章主要介紹了原生Js實現(xiàn)的畫廊功能，幫助大家更好的理解和學習使用JavaScript，感興趣的朋友可以了解下2021-05-05
指定區(qū)域的圖片自動按比例縮小的js代碼（防止頁面被圖片撐破）
有時候我們更新的內(nèi)容，有很多的大圖片，就會導致頁面變形或看不到全圖。一般情況我們用css的max-width控制，但有些瀏覽器不支持，我們也可以用js做個補充2014-02-02
Blog的插入HTML功能有誤。 原來在blueidea.com上看到了用ASP執(zhí)行解壓縮動作的文章，一直沒有去用心看，前日，趁老大不在，爽了一把，把它改成了用JavaScript操作的了。2008-04-04
這篇文章主要介紹了微信小程序開發(fā)用戶授權(quán)登陸，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04