首先

内网IP的获取相对比较复杂,主要是需要依赖 webRTC 这么一个非常用的API

WebRTC,名称源自网页即时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。

webRTC 是HTML 5 的一个扩展,允许去获取当前客户端的IP地址,可以查看当前网址:net.ipcalf.com/

但如果使用 chrome 浏览器打开,此时可能会看到一串类似于:

e87e041d-15e1-4662-adad-7a6601fca9fb.local

的机器码,这是因为chrome 默认是隐藏掉 内网IP地址的,可以通过修改 chrome 浏览器的配置更改此行为:

1、在chrome 浏览器地址栏中输入:chrome://flags/

2、搜索 #enable-webrtc-hide-local-ips-with-mdns 该配置 并将属性改为disabled

3、点击relaunch 浏览器即可查看到本机的内网IP地址

let getIP = new Promise((resolve,reject) => {
    let recode = {};
    let RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    // 如果不存在则使用一个iframe绕过
    if (!RTCPeerConnection) {
        // 因为这里用到了iframe,所以在调用这个方法的script上必须有一个iframe标签
        // <iframe id="iframe" sandbox="allow-same-origin" style="display:none;"></iframe>
        let win = iframe.contentWindow;
        RTCPeerConnection = win.RTCPeerConnection || win.mozRTCPeerConnection || win.webkitRTCPeerConnection;
    }

    //创建实例,生成连接
    let pc = new RTCPeerConnection();

    // 匹配字符串中符合ip地址的字段
    function handleCandidate(candidate) {
        let ip_regexp = /([0-9]{1,3}(\.[0-9]{1,3}){3}|([a-f0-9]{1,4}((:[a-f0-9]{1,4}){7}|:+[a-f0-9]{1,4}){6}))/;
        let ip_isMatch = candidate.match(ip_regexp)[1];
        if (!recode[ip_isMatch]) {
            resolve(ip_isMatch)
            recode[ip_isMatch] = true;

        }
    }

    //监听icecandidate事件
    pc.onicecandidate = (ice) => {
        if (ice.candidate) {
            handleCandidate(ice.candidate.candidate);
        }
    };
    //建立一个伪数据的通道
    pc.createDataChannel('');
    pc.createOffer((res) => {
        pc.setLocalDescription(res);
    }, () => {});

    //延迟,让一切都能完成
    setTimeout(() => {
        let lines = pc.localDescription.sdp.split('\n');
        lines.forEach(item => {
            if (item.indexOf('a=candidate:') === 0) {
                handleCandidate(item);
            }
        })
    }, 1000);
})

调用:

 getIP.then((res) => {
    console.log(res); // ip地址
 })

注意:记得一定要确保用户的浏览器要经过第一步的设置,不然可能就无法拿到了,且该方法只测试了谷歌浏览器

部分资源来自以下作者:
作者:患者_
链接:https://www.jianshu.com/p/7ec601f9c02a

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐