JS 獲取客戶端 IP地址 及 瀏覽器信息
在前端開發(fā)的時(shí)候，有時(shí)候?yàn)榱藴y試需要得到訪問客戶的ip地址。雖說是后端來做的，但是我們前端也可以完成。
獲取 IP 地址
服務(wù)端獲取 再返回給 客戶端
前端 獲取方法
方法一：利用ActiveObject來獲取 局限性僅支持IE且需允許Activex運(yùn)行
方法二：利用第三方平臺(tái)的接口，例如 新浪，太平洋等的接口，來給用戶返回ip地址（其實(shí)也是通過服務(wù)端抓取，但由于不是自己的服務(wù)端，安全性和穩(wěn)定性不可靠）
-
方法三：使用webrtc(Web Real-Time Communications)
- webrtc的定義是一項(xiàng)實(shí)時(shí)通訊技術(shù)，它允許網(wǎng)絡(luò)應(yīng)用或者站點(diǎn)，在不借助中間媒介的情況下，建立瀏覽器之間點(diǎn)對(duì)點(diǎn)（Peer-to-Peer）的連接，實(shí)現(xiàn)視頻流和（或）音頻流或者其他任意數(shù)據(jù)的傳輸
- 經(jīng)測試，在chrome，opera，firefox，safari均可正常獲取
- 對(duì)于IE和Edge，可以采用第一種方式進(jìn)行兼容
- 局限性：當(dāng)客戶端連接了 多個(gè)網(wǎng)絡(luò)的情況下，默認(rèn)優(yōu)先捕捉到以太網(wǎng)卡的 ip，若想捕捉熱點(diǎn)ip,建議拔掉網(wǎng)線
代碼如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>webrtc 獲取客戶端IP</title>
</head>
<body>
<script type="text/javascript">
function getYourIP() {
var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
var addrs = Object.create(null);
addrs["0.0.0.0"] = false;
if (RTCPeerConnection){
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,addrs);
};
rtc.createOffer(function (offerDesc) {
grepSDP(offerDesc.sdp,addrs);
rtc.setLocalDescription(offerDesc);
}, function (e) {
console.warn("offer failed", e);
});
}
else {
document.getElementById('list').textContent = "請(qǐng)使用主流瀏覽器：chrome,firefox,opera,safari";
}
}
// 解析 分析 IP
function grepSDP(sdp,addrs) {
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,addrs);
} else if (~line.indexOf("c=")) {
var parts = line.split(' '),
addr = parts[2];
updateDisplay(addr,addrs);
}
});
}
// 獲取 IP
function updateDisplay(newAddr,addrs) {
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.write(displayAddrs[0]);
}
window.onload=function(){
getYourIP()
}
</script>
</body>
</html>
