这次呢,说一下使用js获取用户电脑的ip信息,刚开始只是想获取用户ip,后来就顺带着获取了操作系统和浏览器信息。

  先说下获取用户ip地址,包括像ipv4,ipv6,掩码等内容,但是大部分都要根据浏览器的支持情况来决定,目前主流浏览器对于ipv4的支持是统一的。第一种:用于仅支持IE的且允许Activex运行,利用ActiveObject来获取。这种的话可以选择性使用。第二种:利用其它平台的接口,在自己程序中使用如:新浪,太平洋等的接口,来给用户返回ip地址,这种是不太安全的方式,万一人家改变接口了呢?第三种(也是我采用的方式):使用WebRTC(Web Real-Time Communications),他的定义是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其他任意数据的传输。当然这些信息和基本api在MDN上面是可以查看的。我们可以使用WebRTC获取ip地址,经测试,在chrome,opera,firefox,safari均可正常获取,对于IE和Edge,可以采用第一种方式进行兼容。下面是获取代码(我这里没有支持IE/Edge):

  1. function getYourIP(){
  2. var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
  3. if (RTCPeerConnection) (function () {
  4. var rtc = new RTCPeerConnection({iceServers:[]});
  5. if (1 || window.mozRTCPeerConnection) {
  6. rtc.createDataChannel('', {reliable:false});
  7. };
  8.  
  9. rtc.onicecandidate = function (evt) {
  10. if (evt.candidate) grepSDP("a="+evt.candidate.candidate);
  11. };
  12. rtc.createOffer(function (offerDesc) {
  13. grepSDP(offerDesc.sdp);
  14. rtc.setLocalDescription(offerDesc);
  15. }, function (e) { console.warn("offer failed", e); });
  16.  
  17. var addrs = Object.create(null);
  18. addrs["0.0.0.0"] = false;
  19. function updateDisplay(newAddr) {
  20. if (newAddr in addrs) return;
  21. else addrs[newAddr] = true;
  22. var displayAddrs = Object.keys(addrs).filter(function (k) { return addrs[k]; });
  23. for(var i = 0; i < displayAddrs.length; i++){
  24. if(displayAddrs[i].length > 16){
  25. displayAddrs.splice(i, 1);
  26. i--;
  27. }
  28. }
  29. document.getElementById('list').textContent = displayAddrs[0];
  30. }
  31.  
  32. function grepSDP(sdp) {
  33. var hosts = [];
  34. sdp.split('\r\n').forEach(function (line, index, arr) {
  35. if (~line.indexOf("a=candidate")) {
  36. var parts = line.split(' '),
  37. addr = parts[4],
  38. type = parts[7];
  39. if (type === 'host') updateDisplay(addr);
  40. } else if (~line.indexOf("c=")) {
  41. var parts = line.split(' '),
  42. addr = parts[2];
  43. updateDisplay(addr);
  44. }
  45. });
  46. }
  47. })();
  48. else{
  49. document.getElementById('list').textContent = "请使用主流浏览器:chrome,firefox,opera,safari";
  50. }
  51. }

其次是获取操作系统,浏览器信息:这里到没有那么麻烦,我使用了包含浏览器信息的Navigator对象,这个对象虽然没有公开标准,但是所有的浏览器都支持他,这就好办了。我们主要用到的是useragent属性,他包含了这些信息,我们要做的只是使用正则表达式分离和提取,针对不同的浏览器,兼容chrome,firefox,opera,ie,edge,safari等,对于其他浏览器,例如360极速等,会返回相应内核对应的浏览器名称。也可以再进行其他判断。下面是代码:

  1. function getBrowserInfo(){
  2. var agent = navigator.userAgent.toLowerCase() ;
  3. console.log(agent);
  4. var arr = [];
  5. var system = agent.split(' ')[1].split(' ')[0].split('(')[1];
  6. arr.push(system);
  7. var regStr_edge = /edge\/[\d.]+/gi;
  8. var regStr_ie = /trident\/[\d.]+/gi ;
  9. var regStr_ff = /firefox\/[\d.]+/gi;
  10. var regStr_chrome = /chrome\/[\d.]+/gi ;
  11. var regStr_saf = /safari\/[\d.]+/gi ;
  12. var regStr_opera = /opr\/[\d.]+/gi;
  13. //IE
  14. if(agent.indexOf("trident") > 0){
  15. arr.push(agent.match(regStr_ie)[0].split('/')[0]);
  16. arr.push(agent.match(regStr_ie)[0].split('/')[1]);
  17. return arr;
  18. }
  19. //Edge
  20. if(agent.indexOf('edge') > 0){
  21. arr.push(agent.match(regStr_edge)[0].split('/')[0]);
  22. arr.push(agent.match(regStr_edge)[0].split('/')[1]);
  23. return arr;
  24. }
  25. //firefox
  26. if(agent.indexOf("firefox") > 0){
  27. arr.push(agent.match(regStr_ff)[0].split('/')[0]);
  28. arr.push(agent.match(regStr_ff)[0].split('/')[1]);
  29. return arr;
  30. }
  31. //Opera
  32. if(agent.indexOf("opr")>0){
  33. arr.push(agent.match(regStr_opera)[0].split('/')[0]);
  34. arr.push(agent.match(regStr_opera)[0].split('/')[1]);
  35. return arr;
  36. }
  37. //Safari
  38. if(agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0){
  39. arr.push(agent.match(regStr_saf)[0].split('/')[0]);
  40. arr.push(agent.match(regStr_saf)[0].split('/')[1]);
  41. return arr;
  42. }
  43. //Chrome
  44. if(agent.indexOf("chrome") > 0){
  45. arr.push(agent.match(regStr_chrome)[0].split('/')[0]);
  46. arr.push(agent.match(regStr_chrome)[0].split('/')[1]);
  47. return arr;
  48. }else{
  49. arr.push('请更换主流浏览器,例如chrome,firefox,opera,safari,IE,Edge!')
  50. return arr;
  51. }
  52. }

用node内置系统模块os同步获取:

  1. let getIP = function() {
  2. let interfaces = require("os").networkInterfaces();
  3. for (var devName in interfaces) {
  4. var iface = interfaces[devName];
  5. for (var i = 0; i < iface.length; i++) {
  6. let alias = iface[i];
  7. if (
  8. alias.family === "IPv4" &&
  9. alias.address !== "127.0.0.1" &&
  10. !alias.internal
  11. ) {
  12. if (alias.address) {
  13. return alias.address;
  14. }
  15. }
  16. }
  17. }
  18. };

(转)js获取内网ip地址,操作系统,浏览器版本等信息的更多相关文章

  1. 通过js获取内网ip和外网ip的简单方法 ...

    今天遇到了一个需求,需要获取用户当前的内网ip, 找了半天终于找到了方法,遂将找到的方法记录下来,留给需要的人. 1,获取内网ip function getIP(callback) { let rec ...

  2. xss实现获取内网ip

    前提得浏览器支持webRTC,测试的时候google浏览器测试成功,火狐浏览器不支持webRTC, 再在xss平台直接复制如下js代码: function form_ip(ip,port){ var ...

  3. 网吧局域网里的设置外网IP地址、设置内网IP地址、限制内网速度和路由器共享

    现在啊,网吧的需求越来越高,同时在经济比较充裕的情况下,作为网吧的老板可能希望打造全千兆的网吧,让每个进入网吧的人都能充分体验高速的感觉,当然更重要的是在同行竞争中处于上游,特别是对网络游戏爱好者的吸 ...

  4. JAVA 优先获取外网Ip,再获取内网Ip

    1.获取内网Ip private String getLocalhostIp(){ String hostAddress = ""; try { InetAddress addre ...

  5. JAVA获取访问者的内网IP地址

    /** * 获取访问者内网IP * @return the server ip */ public static String getIntranetIp() { // 本地IP,如果没有配置外网IP ...

  6. ngrok反向隧道--获取内网IP

    ngrok反向隧道 前情提要:小明与小白各有一台主机,两台主机在同一内网,小明想直接通过内网ssh到小白的主机上.但是小白的ip地址会不断的变化,而小明不想每次都要麻烦小白查看ip.于是小明催生了一个 ...

  7. C# 获取外网IP地址

    很多情况下我们需要获取外网的IP地址,一般用自带的方法获取到的都是不准确,往往获取到的是内网的IP地址,所以需要采用外部网站接口来获取. 代码 通过访问第三方接口来获取真实的ip地址 public s ...

  8. c#获取外网IP地址的方法

    1.如果你是通过路由上网的,可以通过访问ip138之类的地址来获取外网IP 2.如果是通过PPPOE拨号上网的,可以使用以下代码获取IP //获取宽带连接(PPPOE拨号)的IP地址,timeout超 ...

  9. .NET获取客户端的操作系统、IP地址、浏览器版本

    获取客户端的操作系统: #region 获取操作系统版本号 /// <summary> /// 获取操作系统版本号 /// </summary> /// <returns ...

随机推荐

  1. Atitit  文件上传  架构设计 实现机制 解决方案  实践java php c#.net js javascript  c++ python

    Atitit  文件上传  架构设计 实现机制 解决方案  实践java php c#.net js javascript  c++ python 1. 上传的几点要求2 1.1. 本地预览2 1.2 ...

  2. Camera2/HAL3

    Android Camera HAL3中拍照Capture模式下多模块间的交互与帧Result与帧数据回调https://blog.csdn.net/gzzaigcnforever/article/d ...

  3. jquery插件实现分页

    Query Pagination分页插件 原项目地址:http://plugins.jquery.com/project/pagination 版本:v1.2 源文件下载:英文原版 或 中文翻译修改版 ...

  4. wb标准

    1. WEB标准 WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior).对应的标准也分三方面:结 ...

  5. Python的实例方法,类方法,静态方法之间的区别及调用关系

    如果只看这个图,很多人可能会看的一头雾水,特别是学过完全面向对象语言的同学, Python 是双面向的,既可以面向函数编程,也可以面向对象编程,所谓面向函数就是单独一个. py 文件,里面没有类,全是 ...

  6. Mybatis 逆向工程 自动生成代码

    Mybatis 可以通过一定的代码,自动生成包括mapper.xml.mapper.java.po等文件: 一.环境准备: 用到的JAR包如下: 文件只有两个:GenMain.java和generat ...

  7. JavaScript中对象属性的加入和删除

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. ansible使用

    常用ad hoc命令, 如:ansible raleigh -m shell -a 'echo $TERM' ansible webservers -m service -a "name=h ...

  9. 初窥ElasticSearch

    初窥ElasticSearch 官网上面的,不知道讲的是什么.. youtube上面有一个start with,内容是在windows以下跑这个elastic search,然后用一个fidler工具 ...

  10. MEF笔记 之延迟加载

    文章参考:在MEF中实现延迟加载部件  作者:TianFang 仅有一个服务提供者时候 using System; using System.Collections.Generic; using Sy ...