JavaScript获取本机IP地址三种常用方式

 更新时间:2023年12月09日 08:44:59   作者:半兽先生  
在浏览器中使用JavaScript获取本机IP地址是不可行的,因为浏览器的安全策略禁止JavaScript访问这样的信息,这篇文章主要给大家介绍了关于JavaScript获取本机IP地址的三种常用方式,需要的朋友可以参考下

获取本机IP地址是前端工程师经常需要处理的问题。JavaScript 有几种方法可以获取客户端的IP地址。下面是三种获取本机IP的方法。

方法1:使用第三方 API

一种获取客户端IP地址的最简单方法是使用第三方API。可以使用一些免费API,例如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(需要用户授权)

WebRTC 是一种 JavaScript API,用于在浏览器之间直接传输数据。它也可以用于获取客户端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 地址的系统。可以使用 JavaScript DNS 查询来获取本机IP地址。下面是如何使用 JavaScript 进行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>

总结 

到此这篇关于JavaScript获取本机IP地址三种常用方式的文章就介绍到这了,更多相关JS获取本机IP地址内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS+HTML5手机开发之滚动和惯性缓动实现方法分析

    JS+HTML5手机开发之滚动和惯性缓动实现方法分析

    这篇文章主要介绍了JS+HTML5手机开发之滚动和惯性缓动实现方法,涉及javascript结合HTML5特性控制页面元素的运动技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 详解js树形控件—zTree使用总结

    详解js树形控件—zTree使用总结

    本篇文章主要介绍了js树形控件—zTree使用总结,树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点.
    2016-12-12
  • layui 实现二级弹窗弹出之后 关闭一级弹窗的方法

    layui 实现二级弹窗弹出之后 关闭一级弹窗的方法

    今天小编就为大家分享一篇layui 实现二级弹窗弹出之后 关闭一级弹窗的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦

    关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦

    关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦,对于多浏览器的兼容性,需要注意。
    2009-08-08
  • typescript返回值类型和参数类型的具体使用

    typescript返回值类型和参数类型的具体使用

    本文主要介绍了typescript返回值类型和参数类型的具体使用文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • webpack打包js文件及部署的实现方法

    webpack打包js文件及部署的实现方法

    这篇文章主要介绍了webpack打包js文件的方法及webpack打包后的JS文件如何部署,需要的朋友可以参考下
    2017-12-12
  • 微信小程序textarea层级过高的解决方法

    微信小程序textarea层级过高的解决方法

    这篇文章主要给大家介绍了关于微信小程序textarea层级过高问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 详解JavaScript基于面向对象之创建对象(1)

    详解JavaScript基于面向对象之创建对象(1)

    这篇文章主要介绍了JavaScript基于面向对象之创建对象,对创建对象进行了详细描述,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • js 获取当前web应用的上下文路径实现方法

    js 获取当前web应用的上下文路径实现方法

    下面小编就为大家带来一篇js 获取当前web应用的上下文路径实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript中的异步能省掉await吗?

    JavaScript中的异步能省掉await吗?

    这篇文章主要介绍了JavaScript中的异步能省掉await吗?一直以来,困扰我的一个问题是JavaScript中,能否实现不带await的异步。今天我终于把这个问题想通了然后分享给大家,希望对大家的学习过程有所帮助
    2021-12-12

最新评论