网站判断网络连接断开,js判断网络连接断开,最佳实践

借鉴：https://blog.csdn.net/ty497122758/article/details/26613775

思路：js没有判断网络断开的直接方法，通用的方法效果不好(只要在局域网就会判断为连接，无法严格的判断是否连接互联网)

特殊方法，使用js获取一张图片(百度的logo)但不会显示它，判断是否获取成功；需要注意，一般浏览器都会有缓存(文件名相同的资源不会重复加载)，所以采取措施；图片文件后添加参数(由时间生成)，让浏览器认为不是同一张图片。

话不多说，上代码

window.onload = function () { //网页加载完成便运行
    var nextValue = true; //用于决定是否下一次循环
    setInterval(function () { //定时循环，2秒一次
        if (nextValue == true) {
            var EventUtil = {
                addHandler: function (element, type, handler) {
                        if (element.addEventListener) {
                            element.addEventListener(type, handler, false);
                        } else if (element.attachEvent) {
                            element.attachEvent("on" + type, handler);
                        } else {
                            element["on" + type] = handler;
                        }
                    },
                    removeHandler: function (element, type, handler) {
                        if (element.removeEventListener) {
                            element.removeEventListener(type, handler, false);
                        } else if (element.detachEvent) {
                            element.detachEvent("on" + type, handler);
                        } else {
                            element["on" + type] = null;
                        }
                    }
            };
            var dom = document.createElement('img');
            dom.style = 'display:none;';
            dom.src = 'https://www.baidu.com/img/flexible/logo/pc/result.png';
            dom.src += '?t=' + (+new Date()); //图片文件后添加参数(由时间生成)
            dom.id = 'map_img';
            EventUtil.addHandler(dom, 'error', function () {
                swal({ //相当于alert，但更美观
                        title: "网络连接断开！",
                        text: "请检查网络连接！",
                        type: "error",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "我知道啦！",
                        cancelButtonText: "暂不提醒！",
                        closeOnConfirm: true,
                        closeOnCancel: true
                    },
                    function (isConfirm) {
                        if (isConfirm) {} else {
                            nextValue = false;
                        }
                    });
            });
            document.body.appendChild(dom);
        }
    }, 2000);
};

swal提供更美观的弹出框，需要导入css和js：
https://uosblog.top/ZBXYDYFX/js/sweetalert-dev.js
https://uosblog.top/ZBXYDYFX/css/sweetalert.css
建议引入到您的网站上

还需要引入https://code.jquery.com/jquery-3.6.0.min.js

swal更多使用方式http://mishengqiang.com/sweetalert/

效果：