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();

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • layui-table表复选框勾选的所有行数据获取的例子

    layui-table表复选框勾选的所有行数据获取的例子

    今天小编就为大家分享一篇layui-table表复选框勾选的所有行数据获取的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js 利用image对象实现图片的预加载提高访问速度

    js 利用image对象实现图片的预加载提高访问速度

    我们来学习一种名为图像预装载(image preloading)的小技巧来提高图像访问速度,一些浏览器试图通过在本地缓存中保存这些图片来解决此问题,感兴趣的朋友可以了解下
    2013-03-03
  • TS报错:Parameter 'xxx' implicitly has an 'any' type的解决方式

    TS报错:Parameter 'xxx' implicitly has an '

    这篇文章主要给大家介绍了关于TS报错:Parameter 'xxx' implicitly has an 'any' type的解决方式,文中将产生错误的原因及解决方法都介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 基于JavaScript实现屏幕滚动效果

    基于JavaScript实现屏幕滚动效果

    这篇文章主要为大家详细介绍了基于JavaScript实现屏幕滚动效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JS操作XML实例总结(加载与解析XML文件、字符串)

    JS操作XML实例总结(加载与解析XML文件、字符串)

    这篇文章主要介绍了JS操作XML的方法,结合实例形式总结分析了JavaScript加载与解析XML文件及字符串的相关技巧,需要的朋友可以参考下
    2015-12-12
  • 分析uniapp入门之nvue爬坑记

    分析uniapp入门之nvue爬坑记

    uni-app的nvue说白了就是weex的那一套东西,uni-app集成了weex的 SDK,也就实现了App端的原生渲染能力。本文将介绍uniapp遇到的一些坑,分享给大家。
    2021-06-06
  • 原生Js实现的画廊功能

    原生Js实现的画廊功能

    这篇文章主要介绍了原生Js实现的画廊功能,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下
    2021-05-05
  • 指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)

    指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)

    有时候我们更新的内容,有很多的大图片,就会导致页面变形或看不到全图。一般情况我们用css的max-width控制,但有些浏览器不支持,我们也可以用js做个补充
    2014-02-02
  • 用JavaScript操作WinRar

    用JavaScript操作WinRar

    Blog的插入HTML功能有誤。 原來在blueidea.com上看到了用ASP執行解壓縮動作的文章,一直沒有去用心看,前日,趁老大不在,爽了一把,把它改成了用JavaScript操作的了。
    2008-04-04
  • 详解微信小程序开发用户授权登陆

    详解微信小程序开发用户授权登陆

    这篇文章主要介绍了微信小程序开发用户授权登陆,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论