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兼容浏览器FF/IE技巧

    JavaScript兼容浏览器FF/IE技巧

    本文给大家分享的是一个JavaScript兼容火狐浏览器与IE浏览器的一个小技巧,非常的简单实用,有需要的小伙伴可以参考下
    2016-08-08
  • 详解TypeScript中type与interface的区别

    详解TypeScript中type与interface的区别

    在写 ts 相关代码的过程中,总能看到 interface 和 type 的身影。它们的作用好像都一样的,相同的功能用哪一个都可以实现,也都很好用,所以也很少去真正的理解它们之间到底有啥区别,因此本文将详细讲解二者的区别,需要的可以参考一下
    2022-04-04
  • async/await实现Promise.all()的方式

    async/await实现Promise.all()的方式

    Promise.all() 方法接收一个 promise 的 iterable 类型的输入,并且只返回一个Promise实例,并且输入的所有 promise 的 resolve 回调的结果是一个数组,对async/await实现Promise.all()相关知识感兴趣的朋友一起看看吧
    2022-12-12
  • 用JS编写选项卡效果

    用JS编写选项卡效果

    这篇文章主要为大家详细介绍了用JS编写选项卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 微信小程序实现通讯录列表展开收起

    微信小程序实现通讯录列表展开收起

    这篇文章主要为大家详细介绍了微信小程序实现通讯录列表展开收起,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • firefox TBODY 用js显示和隐藏时出现错位的解决方法

    firefox TBODY 用js显示和隐藏时出现错位的解决方法

    今天帮别人写一个网页,发现:当用javascript动态设置tr.style.display = "block"显示某行时,使用IE浏览没有问题,但使用firefox浏览时该行被移到了其它行的后面,很是诧异。
    2008-12-12
  • 探究JavaScript原型数据共享与方法共享实现

    探究JavaScript原型数据共享与方法共享实现

    这篇文章主要介绍了探究JavaScript原型数据共享与方法共享实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 详解js实时获取并显示当前时间的方法

    详解js实时获取并显示当前时间的方法

    这篇文章主要介绍了js实时获取并显示当前时间的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 前端算法题解leetcode114二叉树展开为链表

    前端算法题解leetcode114二叉树展开为链表

    这篇文章主要为大家介绍了前端算法题解leetcode114二叉树展开为链表,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 微信小程序的运行机制与安全机制解决方案详解

    微信小程序的运行机制与安全机制解决方案详解

    这篇文章主要介绍了微信小程序的运行机制与安全机制解决方案,接触小程序有一段时间了,总得来说小程序开发门槛比较低,但其中基本的运行机制和原理还是要懂的
    2023-02-02

最新评论