NewEduCoderBuild/upgrade-browser.html

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

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if IE]>
            <script>
                // IE >= 10 不支持 IE 浏览器判断标签了，要支持这个标签，必须配置这个：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1" />
                // 官方说明：https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)?redirectedfrom=MSDN
                window.isIEBrowser = true;
            </script>
        <![endif]-->
    <script>
        // if (!window.isIEBrowser) {
        //     window.location.replace(window.location.origin);
        // }
    </script>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    <title>实践教学平台</title>
    <style>
        body {
            font-size: 14px;
        }

        ul,
        li {
            list-style: none;
            margin: 0;
            padding: 0;

        }

        .tc {
            text-align: center;
        }

        .red {
            color: #d60012;
        }

        .layout__desc {
            font-size: 16px;
            font-weight: bold;
            padding: 40px 0;
            text-align: center;
        }


        .btn {
            text-align: center;
        }

        .btn a {
            color: #333;
            text-align: center;
            display: inline-block;
            width: 110px;
            text-decoration: none;
            margin: 0 20px;
        }

        .card__info {
            max-width: 580px;
            text-align: left;
            margin: 0 auto;
        }

        .recommend {
            position: relative;
            height: 1px;
            max-width: 580px;
            margin: 40px auto;
            background-color: #ccc;
        }

        .recommend span {
            position: relative;
            background-color: #FFF;
            top: -8px;
            padding: 0 10px;
        }

        .layout__logo {
            width: 140px;
            margin: 20px 0 20px 40px;
        }

        @media screen and (max-width: 800px) {
            .layout__logo {
                margin-left: -10px;
            }

            body {
                padding: 0 20px;
            }
        }
    </style>

<body>
    <div class="layout">
        <img class="layout__logo" src="images/logo.png" alt="头歌实践教学平台">
        <div class="layout__desc">浏览器版本过低，请立即升级</div>
        <div class="layout__body card">
            <div class="card__info">
                <div class="card__title">您当前使用的浏览器类型：<span class="red" id="version"></span>，该浏览器的<span
                        class="red">部分组件版本过低，</span></div>
                <div class="card__tip">将影响正常使用，请立即升级为推荐浏览器，获得完美体验。</div>
                <!-- <ul>
                    <li>
                        <br>
                        <br>

                        如果您的问题得不到解决，欢迎扫码联系头歌助教
                        <br>
                        <br>
                        <br>


                    </li>
                    <li class="tc"><img src="images/qrcode.png" width="180" /></li>

                </ul> -->
                <div class="recommend tc">
                    <span>推荐使用以下浏览器</span>
                </div>
                <div class="btn">
                    <a href="https://www.google.cn/intl/zh-cn/chrome/" target="_blank">
                        <img width="70" src="images/chrome.jpg" /><br />
                        谷歌浏览器
                    </a>
                    <a href="http://www.firefox.com.cn/" target="_blank">
                        <img width="80" src="images/firefox.jpg" /><br />
                        火狐浏览器
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script>
        function IEVersion() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
            var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
            var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
            if (isIE) {
                var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if (fIEVersion == 7) {
                    return 7;
                } else if (fIEVersion == 8) {
                    return 8;
                } else if (fIEVersion == 9) {
                    return 9;
                } else if (fIEVersion == 10) {
                    return 10;
                } else {
                    return 6;//IE版本<=7
                }
            } else if (isEdge) {
                return 'edge';//edge
            } else if (isIE11) {
                return 11; //IE11
            } else {
                return -1;//不是ie浏览器
            }
        }
        function getBrowserInfo() {
            var agent = navigator.userAgent.toLowerCase();

            var regStr_ie = /msie [\d.]+;/gi;
            var regStr_ff = /firefox\/[\d.]+/gi
            var regStr_chrome = /chrome\/[\d.]+/gi;
            var regStr_saf = /safari\/[\d.]+/gi;
                        var isWeChat = /MicroMessenger/i.test(navigator.userAgent);
            var weChatVersion = '';

            if (IEVersion() != '-1') {
                return "IE " + IEVersion()
            }

            //IE
            if (agent.indexOf("msie") > 0) {
                return agent.match(regStr_ie);
            }

            //firefox
            if (agent.indexOf("firefox") > 0) {
                return agent.match(regStr_ff);
            }

            //Safari
            if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
                return agent.match(regStr_saf);
            }

            //Chrome
            if (agent.indexOf("chrome") > 0) {
                return agent.match(regStr_chrome);
            }


            if (isWeChat) {
                var match = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
                if (match) {
                    weChatVersion = match[1];
                    return "MicroMessenger " + weChatVersion
                }
            }

        }

        var browser = getBrowserInfo();
        document.getElementById("version").innerHTML = browser
    </script>
</body>

</html>