Javascript 基于网页访问者隐藏元素/div局域网IP范围内的Intranet

为当地学校建立一个小型内部网站。它们通过几个VLAN运行，每个VLAN都有自己的子网。页面上显示的信息需要根据用户访问站点的子网（尤其是菜单项）略有不同。我想知道Javascript是否有办法确定访问者的IP范围，并根据访问者的子网隐藏元素

因此，192.168.1.0/255.255.255.0中的访问者将看到一个元素。 来自192.168.2.0/255.255.255.0的访问者不会访问

---

等等。

你可以做这样的事情吗

var ip = location.host;

if(ip == 192.168.1.100) {
// do something / show something
}

您可能已经知道了如何显示/隐藏内容，但是您可以使用

addClass

/

removeClass

，并使用如下CSS

    $("CLASS").addClass("visible");

    $("CLASS").removeClass("visible");

和CSS

.visible {
    display: block;
}

解决了

找到用于确定本地IP的脚本

然后用正则表达式检查IP

var CheckIP = /^192\.168\.2\.([2-9]|[1-9][0-9]|1([0-9][0-9])|2([0-4][0-9]|5[0-4]))$/;
       if(CheckIP.test(ip))
       {
             alert("Your IP Address Is Valid.");
             $("#menu-item-5592").addClass("menu_hide");
       }
       else
       {
             alert("Your IP Address Is Not Valid.");
       }

});
</script>
<style>
.menu_hide {
display:none !important;
}
</style>

var CheckIP=/^192.168.2（[2-9]|[1-9][0-9]| 1（[0-9][0-9]）| 2（[0-4][0-9]| 5[0-4]）$；
如果（检查ip测试（ip））
       {
警报（“您的IP地址有效。”）；
$（“#菜单项-5592”）.addClass（“菜单项隐藏”）；
       }
否则
       {
警报（“您的IP地址无效。”）；
       }
});
.菜单隐藏{
显示：无！重要；
}

以下是完整的工作代码：

/**
 * Get the user IP throught the webkitRTCPeerConnection
 * @param onNewIP {Function} listener function to expose the IP locally
 * @return undefined
 */
function getUserIP(onNewIP) { //  onNewIp - your listener function for new IPs
    //compatibility for firefox and chrome
    var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    var pc = new myPeerConnection({
        iceServers: []
    }),
    noop = function() {},
    localIPs = {},
    ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
    key;

    function iterateIP(ip) {
        if (!localIPs[ip]) onNewIP(ip);
        localIPs[ip] = true;
    }

     //create a bogus data channel
    pc.createDataChannel("");

    // create offer and set local description
    pc.createOffer().then(function(sdp) {
        sdp.sdp.split('\n').forEach(function(line) {
            if (line.indexOf('candidate') < 0) return;
            line.match(ipRegex).forEach(iterateIP);
        });

        pc.setLocalDescription(sdp, noop, noop);
    }).catch(function(reason) {
        // An error occurred, so handle the failure to connect
    });

    //listen for candidate events
    pc.onicecandidate = function(ice) {
        if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
        ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
    };
}

// Check IP is within subnet and hide element if it is. 

checkIP(function(ip){
    var CheckIP = /^192\.168\.2\.([2-9]|[1-9][0-9]|1([0-9][0-9])|2([0-4][0-9]|5[0-4]))$/;
       if(CheckIP.test(ip))
       {
            
             $("#menu-item-5592").addClass("menu_hide");
       }
       else
       {
             //* do nothing *//
       }

});

});

/**
*通过WebKitRTPeerConnection获取用户IP
*@paramonnewip{Function}侦听器函数在本地公开IP
*@return未定义
*/
函数getUserIP（onNewIP）{//onNewIP-新IP的侦听器函数
//firefox和chrome的兼容性
var myPeerConnection=window.rtpeerconnection | | window.mozrtpeerconnection | | window.webkirtpeerconnection；
var pc=新的myPeerConnection({
ICEServer:[]
}),
noop=函数（）{}，
localIPs={}，
ipRegex=/（[0-9]{1,3}（\.[0-9]{1,3}）{3}|[a-f0-9]{1,4}（：[a-f0-9]{1,4}）{7}）/g，
钥匙
函数迭代ip（ip）{
如果（！localIPs[ip]）onNewIP（ip）；
localIPs[ip]=真；
}
//创建虚假数据通道
pc.createDataChannel（“”）；
//创建报价并设置本地描述
pc.createOffer（）.then（函数（sdp）{
sdp.sdp.split（'\n'）.forEach（函数（行）{
if（line.indexOf（'candidate'）<0）返回；
line.match（ipRegex）.forEach（iterateIP）；
});
pc.setLocalDescription（sdp、noop、noop）；
}).catch（函数（原因）{
//发生错误，请处理连接失败
});
//倾听候选事件
pc.onicecandidate=函数（ice）{
如果（！ice | |！ice.candidate | |！ice.candidate.candidate | |！ice.candidate.candidate.match（ipRegex））返回；
ice.candidate.candidate.match（ipRegex.forEach）（iterateIP）；
};
}
//检查IP是否在子网内，如果在子网内则隐藏元素。
检查ip（功能（ip）{
var CheckIP=/^192\.168\.2（[2-9]|[1-9][0-9]| 1（[0-9][0-9]）| 2（[0-4][0-9]| 5[0-4]）$/；
如果（检查ip测试（ip））
       {
            
$（“#菜单项-5592”）.addClass（“菜单项隐藏”）；
       }
否则
       {
//*什么也不做*//
       }
});
});

这对于单个IP是可能的。但我需要根据IP范围来做这件事。我改变了我的问题，以便更好地解释。在这种情况下，您可能应该使用正则表达式，但我并不知道如何使用。是的，显示隐藏基本Javascript是没有问题的。只是尝试确定最好的方法来发现访客是否来自某个IP范围，然后根据该范围显示/隐藏。也许可以只抓取子网中的第三位数字。X.X.2.X，然后将其与一个整数进行比较，或者将前三个192.168.2.X相加，然后将其与一个整数进行比较。这是确定它是否是真正的ip的一个很好的方法，它并不能回答问题，但实际上，它工作得很完美。再看看。警报只是为了测试。上面的脚本正是我所需要的。正则表达式测试用户的本地IP地址是否在192.168.2.0/255.255.255.0范围内，如果在192.168.2.0/255.255.0范围内，则元素被隐藏，并且存在一个表示“您的地址有效”的警报。如果不在，则元素未被隐藏，并且存在一个表示“您的地址无效”的警报。我将在生产环境中删除这些警报。我已经测试过了，效果很好。我可以根据需要修改它以检查不同的子网。