在前端开发的时候,有时候为了测试需要得到访问客户的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;
}
}

  

在一次后端管理系统的demo中需要用得到就给大家总结了一下。有问题及时评论24小时内回复,狗尾草和大家一起加油!
 

(效果五)js获取客户端ip地址及浏览器信息的更多相关文章

  1. JS获取客户端IP地址、MAC和主机名【转】

    JS获取客户端IP地址.MAC和主机名 引用:JS获取客户端IP地址.MAC和主机名的7个方法汇总 利用搜狐接口 <html> <head> <meta http-equ ...

  2. 获取客户端IP地址定位城市信息

    获取客户端IP地址定位城市信息 1.首先获取客户端的IP地址 function getIPaddress(){ $IPaddress=''; if (isset($_SERVER)){ if (iss ...

  3. JS获取客户端IP地址、MAC和主机名七种方法

    一.使用JS获取客户端IP的几个方法方法一(只针对IE且客户端的IE允许AcitiveX运行,通过平台:XP,SERVER03,2000).获取客户端IP代码:<HTML><HEAD ...

  4. JS获取客户端IP地址、MAC和主机名的7个方法汇总

    今天在搞JS(javascript)获取客户端IP的小程序,上网搜了下,好多在现在的系统和浏览器中的都无效,很无奈,在Chrome.FireFox中很少搞到直接利用ActiveX获取IP等的JS脚本. ...

  5. js获取客户端ip地址

    <script type="text/javascript" src="http://www.coding123.net/getip.ashx?js=1" ...

  6. 用js获取客户端IP地址

    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script type=& ...

  7. PHP 如何获取客户端ip地址

    PHP 如何获取客户端ip地址 一.总结 一句话总结:主要是使用$_SERVER的 REMOTE_ADDR 和 HTTP_X_FORWARDED_FOR 两个属性,在用户使用不同代理的时候这两个属性可 ...

  8. js 获取客户端mac地址

    js 获取客户端mac地址 javascript获取客户端网卡MAC地址和IP地址和计算机名 nodesj如何获得客户端的mac地址呢? 浏览器获取MAC地址 不限浏览器的mac地址取得的几种办法 I ...

  9. .net 获取客户端Ip地址

    Request.ServerVariables["REMOTE_ADDR"]来取得客户端的IP地址,但如果客户端是使用代理服务器来访问,那取到的就是代理服务器的IP地址,而不是真正 ...

随机推荐

  1. PolyBase--整合SQLServer和Hadoop

    我们一直强调,大数据和传统的关系数据库并不对立,未来公司的的业务将会是大数据和关系型数据库的整合.微软的PolyBase打响了SQL Server和Hadoop整合的第一枪. 在2012年度的SQL ...

  2. python入门三:文件操作

    一.文件操作 1.文件对象:和c一样,要想对一个文件进行操作,需要获取该文件的对象 f = open("xxx") # 打开文件并获取文件对象 f.xxx # 对文件进行某些操作 ...

  3. Python3.x:Linux下退出python命令行

    Python3.x:Linux下退出python命令行 退出命令: quit() #或者 exit() #或者 Ctrl-D

  4. ASP.MVC 项目中使用 UEditor 文本编辑器

    1.下载UEditor 源文件,并导入项目中 2.添加项目中需要使用的CSS和JS //Ueditor 文本编辑器必备的StyleBundle和ScriptBundle StyleBundle ued ...

  5. 20145120黄玄曦《网络对抗》MSF基础应用

    20145120黄玄曦<网络对抗>MSF基础应用 准备工作 本来决定就是老师提供的XP虚拟机了,做着做着发现因为打补丁以及语言的问题,需要另外的虚拟机. 求来了不那么健壮的虚拟机,环境如下 ...

  6. 《Language Implementation Patterns》之 语言翻译器

    语言翻译器可以从一种计算机语言翻译成另外一种语言,比如一种DSL的标量乘法axb翻译成java就变成a*b:如果DSL里面有矩阵运算,就需要翻译成for循环.翻译器需要完全理解输入语言的所有结构,并选 ...

  7. 正式学习React(四) ----Redux源码分析

    今天看了下Redux的源码,竟然出奇的简单,好吧.简单翻译做下笔记: 喜欢的同学自己可以去github上看:点这里 createStore.js import isPlainObject from ' ...

  8. ls存在的文件,不能操作

    bash-4.2# pwd/oracle/product/10.2.0/db_1/network/adminbash-4.2# lssqlnet.ora                 libnrad ...

  9. thrift安装及常见问题

    一.安装thrift (macOS / Linux) 1. 下载thrift0.10.0源码 https://github.com/apache/thrift/releases/tag/0.10.0 ...

  10. scala LocalDateTime String 转换

    DateTimeFormatter df = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");LocalDateTime ti ...