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('\r\n').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;
             }
         }

　　好了，这次的分享就到这里，谢谢你的阅读，如果有什么不对或者更好的方式请您提出宝贵的意见，或者您有什么问题也可以评论，我会尽力为您解答，再次感谢您的关注！！

　　若要发布在网上或者转载的话请注上原文地址：

　　作者：铁柱成针

　　原文地址：http://www.cnblogs.com/zgh-blog/p/jsGetIPAndBrowserInfo.html