给记事簿添加老旧浏览器提醒

Mo2024-02-112024-02-12

前言

之前在学校用白班的希沃浏览器(Chromium 71内核)看我的记事簿，文章封面图加载不出来，控制台疯狂报错，ie更是重量级，样式直接爆炸，于是就浅搞了个老旧浏览器提示。

警告示例

开始

css部分

在路径/source/css/中新建version-check.css

.warning-message {
    position: fixed;
    bottom: 10px;
    right: 10px;
    padding: 10px;
    background-color: #f66;
    border: 1px solid #f00;
    font-family: Arial, sans-serif;
    z-index: 9999;
}

js部分

在路径/source/js中新建version-check.js

window.onload = function () {
    var ua = window.navigator.userAgent;
    var isIE = /MSIE|Trident/.test(ua);
    var isChrome = /Chrome/.test(ua) && /Google Inc/.test(navigator.vendor);
    var isEdge = /Edg/.test(ua);
    var isFirefox = /Firefox/.test(ua);
    var isOpera = /OPR/.test(ua);

    if (
        (isIE || isChrome || isEdge || isFirefox || isOpera) &&
        ((isIE) || (isChrome && /Chrome\/(\d+)/.exec(ua)[1] < 90) ||
            (isEdge && /Edg\/(\d+)/.exec(ua)[1] < 90) ||
            (isFirefox && /Firefox\/(\d+)/.exec(ua)[1] < 90) ||
            (isOpera && /OPR\/(\d+)/.exec(ua)[1] < 80))
    ) {
        var browserInfo = "";
        if (isIE) {
            browserInfo = "Internet Explorer";
        } else if (isChrome) {
            browserInfo = "Chrome";
        } else if (isEdge) {
            browserInfo = "Microsoft Edge";
        } else if (isFirefox) {
            browserInfo = "Mozilla Firefox";
        } else if (isOpera) {
            browserInfo = "Opera";
        }

        var version = "";
        if (isIE) {
            version = /(MSIE|rv:)(\d+(.\d+)?)/.exec(ua)[2];
        } else if (isChrome) {
            version = /Chrome\/(\d+)/.exec(ua)[1];
        } else if (isEdge) {
            version = /Edg\/(\d+)/.exec(ua)[1];
        } else if (isFirefox) {
            version = /Firefox\/(\d+)/.exec(ua)[1];
        } else if (isOpera) {
            version = /OPR\/(\d+)/.exec(ua)[1];
        }

        var warningMessage = document.createElement("div");
        warningMessage.className = "warning-message";
        warningMessage.innerHTML = "您的浏览器 " + browserInfo + " 内核版本 " + version + " 过低，可能存在兼容性问题。请升级您的浏览器或使用其他浏览器访问。";
        document.body.appendChild(warningMessage);
    }
};

引入css和js

主题配置文件config.anzhiyu.yml新增

inject:
  head:
  ...
    # 浏览器版本检测css
    - <link rel="stylesheet" href="/css/version-check.css">
  ...
  bottom:
  ...
    # 浏览器版本检测js
    - <script src="/js/version-check.js"></script>
  ...