web内外网判断界面

· 2023-01-26 · # 杂七杂八事务所 # javascript

因日常需要，我们在实验室内网中部署了一个服务，在校园网内都能正常访问，同时配置了内网穿透服务，实现外网也能正常访问。但外网访问毕竟是通过内网穿透实现，稳定性与网速都有限制，且不能实现提供大量下载服务，于是就有了这么一个想法：用户先访问内外网判断界面，如果判断当前用户所在的是校园网内网，则自动跳转到内网界面，否则跳转到外网界面进行访问，从而实现内外网分流，提高访问效率，降低带宽占用等功能。

原理：在内外网判断界面中使用内网ip请求一张图片，然后利用图片 load 后的 error 事件来判断内外网，当判断界面能够加载到内网中的图片时，则当前用户所处的为内网；否则当前用户为外网，然后使用 window.location.href 跳转到不同的界面中。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>内外网判断中转界面</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            overflow: hidden;
            box-sizing: border-box;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        a:hover{
            color: blue;
            text-decoration: underline;
            font-weight: 600;
        }
        h1{
            margin:  auto;
            padding: 0;
            width: 100%;
            height: 80px;
            background-color: #f5f5f5;
            text-align: center;
            justify-content: center;
            line-height: 80px;
        }
        h3{
            margin:20px  auto;
            padding: 0;
            background-color: yellow;
            width: 600px;
            height: 80px;
            text-align: center;
            justify-content: center;
            /* 文字上下居中 */
            line-height: 80px;
        }
        #footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            background-color: #f5f5f5;
            text-align: center;
            line-height: 50px;
        }
        #footer p{
            margin: auto;
            padding: 0;
            font-size: 16px;
            line-height: 25px;
        }
    </style> 
</head>

<body>
    <h1>XXX网络中转平台</h1>
    <h3>正在判断当前网络所处网络类型，请稍等！！！</h3>

    <div id="footer">
        <p>有问题请联系邮箱：abc@xxx.com</p>
        <p> © 2023 <a href="www.qiaoyukeji.cn" target="_blank">巧遇科技工作室 </a>All Rights Reserved</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        // 利用图片 load 后的error事件来判断网络的内外网
        var timeStr = setTimeout(function () {
            var $img = $('<img src="http://127.0.0.1:5500/2.jpg?' + (new Date()) + '">')
            $img.appendTo('body').css("display", "none").load(function () {
                console.log("内网！")
                window.location.href="http://www.baidu.com"
                $(this).remove()
            }).error(function () {
                console.log("外网！！")
                window.location.href="http://www.bilibili.com"
                $(this).remove()
            })
        }, 2000)
    </script>
</body>

</html>