JS 获取客户端 IP地址 及 浏览器信息
在前端开发的时候，有时候为了测试需要得到访问客户的ip地址。虽说是后端来做的，但是我们前端也可以完成。
获取 IP 地址
服务端获取 再返回给 客户端
前端 获取方法
-
方法一：利用ActiveObject来获取 局限性仅支持IE且需允许Activex运行
-
方法二：利用第三方平台的接口，例如 新浪，太平洋等的接口，来给用户返回ip地址（其实也是通过服务端抓取，但由于不是自己的服务端，安全性和稳定性不可靠）
-
方法三：使用webrtc(Web Real-Time Communications)
- webrtc的定义是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输
- 经测试，在chrome，opera，firefox，safari均可正常获取
- 对于IE和Edge，可以采用第一种方式进行兼容
- 局限性：当客户端连接了 多个网络的情况下，默认优先捕捉到以太网卡的 ip，若想捕捉热点ip,建议拔掉网线
代码如下
<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 = "请使用主流浏览器：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>
网友评论