• (转)js获取内网ip地址,操作系统,浏览器版本等信息


    这次呢,说一下使用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):

    function getYourIP(){
        var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
        if (RTCPeerConnection) (function () {
            var rtc = new RTCPeerConnection({iceServers:[]});
            if (1 || window.mozRTCPeerConnection) {     
                rtc.createDataChannel('', {reliable:false});
            };
            
            rtc.onicecandidate = function (evt) {
                if (evt.candidate) grepSDP("a="+evt.candidate.candidate);
            };
            rtc.createOffer(function (offerDesc) {
                grepSDP(offerDesc.sdp);
                rtc.setLocalDescription(offerDesc);
            }, function (e) { console.warn("offer failed", e); });
            
            
            var addrs = Object.create(null);
            addrs["0.0.0.0"] = false;
            function updateDisplay(newAddr) {
                if (newAddr in addrs) return;
                else addrs[newAddr] = true;
                var displayAddrs = Object.keys(addrs).filter(function (k) { return addrs[k]; });
                for(var i = 0; i < displayAddrs.length; i++){
                    if(displayAddrs[i].length > 16){
                        displayAddrs.splice(i, 1);
                        i--;
                    }
                }
                document.getElementById('list').textContent = displayAddrs[0];
            }
            
            function grepSDP(sdp) {
                var hosts = [];
                sdp.split('
    ').forEach(function (line, index, arr) { 
                   if (~line.indexOf("a=candidate")) {    
                        var parts = line.split(' '),       
                            addr = parts[4],
                            type = parts[7];
                        if (type === 'host') updateDisplay(addr);
                    } else if (~line.indexOf("c=")) {       
                        var parts = line.split(' '),
                            addr = parts[2];
                        updateDisplay(addr);
                    }
                });
            }
        })();
        else{
            document.getElementById('list').textContent = "请使用主流浏览器:chrome,firefox,opera,safari";
        }
    }

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

    function getBrowserInfo(){
        var agent = navigator.userAgent.toLowerCase() ;
        console.log(agent);
        var arr = [];
        var system = agent.split(' ')[1].split(' ')[0].split('(')[1];
        arr.push(system);
        var regStr_edge = /edge/[d.]+/gi;
        var regStr_ie = /trident/[d.]+/gi ;
        var regStr_ff = /firefox/[d.]+/gi;
        var regStr_chrome = /chrome/[d.]+/gi ;
        var regStr_saf = /safari/[d.]+/gi ;
        var regStr_opera = /opr/[d.]+/gi;
        //IE
        if(agent.indexOf("trident") > 0){
            arr.push(agent.match(regStr_ie)[0].split('/')[0]);
            arr.push(agent.match(regStr_ie)[0].split('/')[1]);
            return arr;
        }
        //Edge
        if(agent.indexOf('edge') > 0){
            arr.push(agent.match(regStr_edge)[0].split('/')[0]);
            arr.push(agent.match(regStr_edge)[0].split('/')[1]);
            return arr;
        }
        //firefox
        if(agent.indexOf("firefox") > 0){
            arr.push(agent.match(regStr_ff)[0].split('/')[0]);
            arr.push(agent.match(regStr_ff)[0].split('/')[1]);
            return arr;
        }
        //Opera
        if(agent.indexOf("opr")>0){
            arr.push(agent.match(regStr_opera)[0].split('/')[0]);
            arr.push(agent.match(regStr_opera)[0].split('/')[1]);
            return arr;
        }
        //Safari
        if(agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0){
            arr.push(agent.match(regStr_saf)[0].split('/')[0]);
            arr.push(agent.match(regStr_saf)[0].split('/')[1]);
            return arr;
        }
        //Chrome
        if(agent.indexOf("chrome") > 0){
            arr.push(agent.match(regStr_chrome)[0].split('/')[0]);
            arr.push(agent.match(regStr_chrome)[0].split('/')[1]);
            return arr;
        }else{
            arr.push('请更换主流浏览器,例如chrome,firefox,opera,safari,IE,Edge!')
            return arr;
        }
    }

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

    let getIP = function() {
      let interfaces = require("os").networkInterfaces();
      for (var devName in interfaces) {
        var iface = interfaces[devName];
        for (var i = 0; i < iface.length; i++) {
          let alias = iface[i];
          if (
            alias.family === "IPv4" &&
            alias.address !== "127.0.0.1" &&
            !alias.internal
          ) {
            if (alias.address) {
              return alias.address;
            }
          }
        }
      }
    };
  • 相关阅读:
    CaltrainTimes从设计到发布(基于Flex的手机应用)
    使用Flex构建Web和移动参考应用程序
    使用Flex4容器若干技巧
    移动设备外观设计的基础知识
    在移动设备应用程序中使用文本的指导原则
    在移动设备应用程序中使用软键盘
    多分辨率适配(下)
    多分辨率适配(上)
    CocosBuilder 多分辨率基础
    【2019-12-31】在逆境中锻炼自己的心态
  • 原文地址:https://www.cnblogs.com/ximenxiazi/p/10373389.html
Copyright © 2020-2023  润新知