JavaScript实现获取本机IP地址

 更新时间:2024年07月01日 16:50:03   作者:@web网页精选  
这篇文章主要介绍了JavaScript实现获取本机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,用于在浏览器之间直接传输数据。

它也可以用于获取客户端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 地址的系统。

可以使用 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中的错误处理。主要介绍JavaScript中的易犯错误、错误处理、异步代码编写等内容。下面就让我们一起看看如何正确处理JavaScript中的错误
    2017-10-10
  • uni-app小程序实现微信在线聊天功能(私聊/群聊)

    uni-app小程序实现微信在线聊天功能(私聊/群聊)

    这篇文章主要介绍了uni-app小程序实现微信在线聊天(私聊/群聊),今天记录一下项目核心功能的实现过程。页面UI以及功能逻辑全部来源于微信,即时聊天业务的实现使用socket.io,前端使用uni-app开发,后端服务器基于node实现,数据库选择mongoDB,需要的朋友可以参考下
    2023-02-02
  • uniapp如何手动实现让input文本框聚焦效果

    uniapp如何手动实现让input文本框聚焦效果

    最近使用uniapp做一个评论的功能,遇到一个需求就是点击上面的评论图标,让定位在底部的input框聚焦,下面这篇文章主要给大家介绍了关于uniapp如何手动实现让input文本框聚焦效果的相关资料,需要的朋友可以参考下
    2023-12-12
  • Javascript this关键字使用分析

    Javascript this关键字使用分析

    这是来自http://www.quirksmode.org/js/this.html这篇文章里对this的定义,直接看定义似乎什么也不知道,下面通过实例来说明各种情况下this所指代的对象以及原理。
    2008-10-10
  • Electron实现应用打包、自动升级过程解析

    Electron实现应用打包、自动升级过程解析

    这篇文章主要介绍了Electron实现应用打包、自动升级过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 一文读懂JS中的var/let/const和暂时性死区

    一文读懂JS中的var/let/const和暂时性死区

    这篇文章主要为大家详细介绍了JavaScript中的var、let、const和暂时性死区的异同,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-02-02
  • javascript容错处理代码(屏蔽js错误)

    javascript容错处理代码(屏蔽js错误)

    本文主要介绍了javascript的容错处理代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)

    js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)

    这篇文章主要介绍了js实现用户离开页面前提示是否离开此页面的方法,较为详细的分析了javascript针对浏览器事件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • js文本框走动跑马灯效果代码分享

    js文本框走动跑马灯效果代码分享

    这篇文章主要介绍了js文本框跑马灯效果,功能实现非常简单,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • js实现数字跳动到指定数字

    js实现数字跳动到指定数字

    这篇文章主要为大家详细介绍了js实现数字跳动到指定数字,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08

最新评论