2019-07-05

[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）：
const getUserIP = onNewIP => {
// onNewIp - your listener function for new IPs
// Firefox和Chrome的兼容性
const MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
const pc = new MyPeerConnection({
iceServers: [],
});
const noop = () => {};
const localIPs = {};
const ipRegex = /([0-9]{1,3}(.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;

function iterateIP(ip) {
if (!localIPs[ip]) onNewIP(ip);
localIPs[ip] = true;
}
// create a bogus data channel
pc.createDataChannel('');
// create offer and set local description
try {
pc.createOffer(
sdp => {
sdp.sdp.split('\n').forEach(line => {
if (line.indexOf('candidate') < 0) return;
line.match(ipRegex).forEach(iterateIP);
});
pc.setLocalDescription(sdp, noop, noop);
},
sdp => sdp,
);
} catch (err) {
return err;
}
// listen for candidate events
pc.onicecandidate = ice => {
if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
};
};
export default getUserIP;

其次是获取操作系统，浏览器信息：这里到没有那么麻烦，我使用了包含浏览器信息的Navigator对象，这个对象虽然没有公开标准，但是所有的浏览器都支持他，这就好办了。我们主要用到的是useragent属性，他包含了这些信息，我们要做的只是使用正则表达式分离和提取，针对不同的浏览器，兼容chrome,firefox,opera,ie,edge,safari等，对于其他浏览器，例如360极速等，会返回相应内核对应的浏览器名称。也可以再进行其他判断。下面是代码：
export const getOsInfo = () => {
const userAgent = navigator.userAgent.toLowerCase();
let name = 'Unknown';
let version = 'Unknown';
if (userAgent.indexOf('win') > -1) {
name = 'Windows';
if (userAgent.indexOf('windows nt 5.0') > -1) {
version = 'Windows 2000';
} else if (userAgent.indexOf('windows nt 5.1') > -1 || userAgent.indexOf('windows nt 5.2') > -1) {
version = 'Windows XP';
} else if (userAgent.indexOf('windows nt 6.0') > -1) {
version = 'Windows Vista';
} else if (userAgent.indexOf('windows nt 6.1') > -1 || userAgent.indexOf('windows 7') > -1) {
version = 'Windows 7';
} else if (userAgent.indexOf('windows nt 6.2') > -1 || userAgent.indexOf('windows 8') > -1) {
version = 'Windows 8';
} else if (userAgent.indexOf('windows nt 6.3') > -1) {
version = 'Windows 8.1';
} else if (userAgent.indexOf('windows nt 6.2') > -1 || userAgent.indexOf('windows nt 10.0') > -1) {
version = 'Windows 10';
} else {
version = 'Unknown';
}
} else if (userAgent.indexOf('iphone') > -1) {
name = 'Iphone';
} else if (userAgent.indexOf('mac') > -1) {
name = 'Mac';
} else if (
userAgent.indexOf('x11') > -1 ||
userAgent.indexOf('unix') > -1 ||
userAgent.indexOf('sunname') > -1 ||
userAgent.indexOf('bsd') > -1
) {
name = 'Unix';
} else if (userAgent.indexOf('linux') > -1) {
if (userAgent.indexOf('android') > -1) {
name = 'Android';
} else {
name = 'Linux';
}
} else {
name = 'Unknown';
}
const os = {};
os.name = name;
os.version = version;
/*
//document.write("系统：" + os.name + "版本:" + os.name)
/
return os;
};
export const getBrowerInfo = () => {
const Browser = (window => {
const { document, navigator } = window;
const agent = navigator.userAgent.toLowerCase();
/
//IE8+支持.返回浏览器渲染当前文档所用的模式
//IE6,IE7:undefined.IE8:8(兼容模式返回7).IE9:9(兼容模式返回7||8)
//IE10:10(兼容模式7||8||9)
/
const IEMode = document.documentMode;
// chorme
const chrome = window.chrome || false;
const System = {
agent,
isIE: /trident/.test(agent),
isGecko: agent.indexOf('gecko') > 0 && agent.indexOf('like gecko') < 0,
isWebkit: agent.indexOf('webkit') > 0,
isStrict: document.compatMode === 'CSS1Compat',
supportSubTitle: () => 'track' in document.createElement('track'),
supportScope: () => 'scoped' in document.createElement('style'),
ieVersion: () => {
const rMsie = /(msie\s|trident.rv:)([\w.]+)/;
const ma = window.navigator.userAgent.toLowerCase();
const match = rMsie.exec(ma);
try {
return match[2];
} catch (e) {
// console.log("error");
return IEMode;
}
},
// Opera版本号
operaVersion: () => {
try {
if (window.opera) {
return agent.match(/opera.([\d.]+)/)[1];
}
if (agent.indexOf('opr') > 0) {
return agent.match(/opr/([\d.]+)/)[1];
}
} catch (e) {
// console.log("error");
return 0;
}
},
};
try {
// 浏览器类型(IE、Opera、Chrome、Safari、Firefox) // safari也提供了专门的判定方式
if (System.isIE) {
System.type = 'IE';
System.version = System.ieVersion();
} else if (window.opera || agent.indexOf('opr') > 0) {
System.type = 'Opera';
System.version = System.operaVersion();
} else if (agent.indexOf('chrome') > 0) {
System.type = 'Chrome';
[, System.version] = agent.match(/chrome/([\d.]+)/);
} else if (window.openDatabase) {
System.type = 'Safari';
[, System.version] = agent.match(/version/([\d.]+)/);
} else if (agent.indexOf('firefox') > 0) {
System.type = 'Firefox';
[, System.version] = agent.match(/firefox/([\d.]+)/);
} else {
System.type = 'unknow';
System.version = 'unknow';
}
// 浏览器外壳
System.shell = () => {
if (agent.indexOf('edge') > 0) {
System.version = agent.match(/edge/([\d.]+)/)[1] || System.version;
return 'edge浏览器';
}
// 遨游浏览器
if (agent.indexOf('maxthon') > 0) {
System.version = agent.match(/maxthon/([\d.]+)/)[1] || System.version;
return '傲游浏览器';
}
// QQ浏览器
if (agent.indexOf('qqbrowser') > 0) {
System.version = agent.match(/qqbrowser/([\d.]+)/)[1] || System.version;
return 'QQ浏览器';
}

    // 搜狗浏览器
    if (agent.indexOf('se 2.x') > 0) {
      return '搜狗浏览器';
    }

    // Chrome:也可以使用window.chrome && window.chrome.webstore判断
    if (chrome && System.type !== 'Opera') {
      const external = window.external;
      const clientInfo = window.clientInformation;
      // 客户端语言:zh-cn,zh.360下面会返回undefined
      const clientLanguage = clientInfo.languages;
      // 猎豹浏览器:或者agent.indexOf("lbbrowser")>0
      if (external && 'LiebaoGetVersion' in external) {
        return '猎豹浏览器';
      }
      // 百度浏览器
      if (agent.indexOf('bidubrowser') > 0) {
        System.version = agent.match(/bidubrowser\/([\d.]+)/)[1] || agent.match(/chrome\/([\d.]+)/)[1];
        return '百度浏览器';
      }
      // 360极速浏览器和360安全浏览器
      if (System.supportSubTitle() && typeof clientLanguage === 'undefined') {
        // object.key()返回一个数组.包含可枚举属性和方法名称
        const storeKeyLen = Object.keys(chrome.webstore).length;
        // const v8Locale = 'v8Locale' in window;
        return storeKeyLen > 1 ? '360极速浏览器' : '360安全浏览器';
      }
      return 'Chrome';
    }
    return System.type;
  };
  // 浏览器名称(如果是壳浏览器,则返回壳名称)
  System.name = System.shell();
  // 对版本号进行过滤过处理
  // System.version = System.versionFilter(System.version);
} catch (e) {
  console.log(e.message);
}
return {
  client: System,
};

})(window);
if (Browser.client.name === undefined || Browser.client.name === '') {
Browser.client.name = 'Unknown';
Browser.client.version = 'Unknown';
} else if (Browser.client.version === undefined) {
Browser.client.version = 'Unknown';
}
/*
document.write(Browser.client.name + " " + Browser.client.version);
*/
return Browser;
};

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,362评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,330评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,247评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,560评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,580评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,569评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,929评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,587评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,840评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,366评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,945评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2赞 342

推荐阅读更多精彩内容

  • 2019-07-05
    Spring笔记 [if !supportLists]一、[endif]MVC思想 M: Model 数据模型(U...
    1fa38a6a3bcf阅读 404评论 0赞 0
  • 2019-07-05
    Docker 学习笔记 - 端口映射与容器互联 作者:马燕龙 时间:2017-11-06 分类:Docker 一、...
    大海244阅读 315评论 0赞 0
  • 2019-07-05
    PHPStorm的使用姿势 2017-05-23 工具 工具 俗话说，工欲善其事必先利其器。作为一名码农，合适开发...
    大海244阅读 144评论 0赞 0
  • 一个内向人的阐述
    常常听人们说，结过婚的女儿就是泼出去的水。结婚后就不在是娘家人，在回娘家的时候就是客人，一直以为这种情况不会在我...
    阅白阅读 162评论 0赞 0
  • 5月19日，放任
    自由，没人管，只能说明一件事：你不被重视。
    吾乃哲猫阅读 128评论 0赞 0