js獲取ip地址，作業系統，瀏覽器版本等資訊，可相容
這次呢，說一下使用js獲取使用者電腦的ip資訊，剛開始只是想獲取使用者ip，後來就順帶著獲取了作業系統和瀏覽器資訊。
先說下獲取使用者ip地址，包括像ipv4,ipv6,掩碼等內容，但是大部分都要根據瀏覽器的支援情況來決定，目前主流瀏覽器對於ipv4的支援是統一的。第一種：用於僅支援IE的且允許Activex執行，利用ActiveObject來獲取。這種的話可以選擇性使用。第二種：利用其它平臺的介面，在自己程式中使用如：新浪，太平洋等的介面，來給使用者返回ip地址，這種是不太安全的方式，萬一人家改變介面了呢？第三種（也是我採用的方式）：使用WebRTC(Web Real-Time Communications),他的定義是一項實時通訊技術，它允許網路應用或者站點，在不借助中間媒介的情況下，建立瀏覽器之間點對點（Peer-to-Peer）的連線，實現視訊流和（或）音訊流或者其他任意資料的傳輸。當然這些資訊和基本api在
1 function getYourIP(){ 2 var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection; 3if (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 18 var addrs = Object.create(null); 19 addrs["0.0.0.0"] = false; 20 function updateDisplay(newAddr) { 21 if (newAddr in addrs) return; 22 else addrs[newAddr] = true; 23 var displayAddrs = Object.keys(addrs).filter(function (k) { return addrs[k]; }); 24 for(var i = 0; i < displayAddrs.length; i++){ 25 if(displayAddrs[i].length > 16){ 26 displayAddrs.splice(i, 1); 27 i--; 28 } 29 } 30 document.getElementById('list').textContent = displayAddrs[0]; 31 } 32 33 function grepSDP(sdp) { 34 var hosts = []; 35 sdp.split('\r\n').forEach(function (line, index, arr) { 36 if (~line.indexOf("a=candidate")) { 37 var parts = line.split(' '), 38 addr = parts[4], 39 type = parts[7]; 40 if (type === 'host') updateDisplay(addr); 41 } else if (~line.indexOf("c=")) { 42 var parts = line.split(' '), 43 addr = parts[2]; 44 updateDisplay(addr); 45 } 46 }); 47 } 48 })(); 49 else{ 50 document.getElementById('list').textContent = "請使用主流瀏覽器：chrome,firefox,opera,safari"; 51 } 52 }
其次是獲取作業系統，瀏覽器資訊：這裡到沒有那麼麻煩，我使用了包含瀏覽器資訊的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 }
好了，這次的分享就到這裡，謝謝你的閱讀，如果有什麼不對或者更好的方式請您提出寶貴的意見，或者您有什麼問題也可以評論，我會盡力為您解答，再次感謝您的關注！！
若要釋出在網上或者轉載的話請註上原文地址：
作者：鐵柱成針
原文地址：http://www.cnblogs.com/zgh-blog/p/jsGetIPAndBrowserInfo.html