js，vue怎样判断当前的网络状态是不是在线

Posted 2023-05-18

参考技术A  if (navigator.onLine)

         alert("正常工作");

       else 

       alert("掉线了");

      

//vue项目跳转其他项目

window.location.href=你想跳转的地址链接

判断网络问题

在移动项目，有时候需要检测当前的状态是否是在wifi网络下，那js可以检测出这种状态吗？

我们可以试下用window.navigator.connection来检测，另外微信6.0版本以上，UA有个NetType，6.0版本以下，可以用微信私有接口WeixinJSBridge：

1. 详细判断网络

var wifi = true;
    var ua = window.navigator.userAgent;
    var con = window.navigator.connection;
    // 如果是微信
    if(/MicroMessenger/.test(ua)){
        // 如果是微信6.0以上版本，用UA来判断
        if(/NetType/.test(ua)){
            if(ua.match(/NetType\/(\S*)$/)[1] != ‘WIFI‘){
                wifi = false;
            }
        // 如果是微信6.0以下版本，调用微信私有接口WeixinJSBridge
        }else{
            document.addEventListener("WeixinJSBridgeReady",function onBridgeReady(){
                WeixinJSBridge.invoke(‘getNetworkType‘,{},function(e){
                    if(e.err_msg != "network_type:wifi"){
                        wifi = false;
                    }
                });
            });
        }
    // 如果支持navigator.connection
    }else if(con){
        var network = con.type;
        if(network != "wifi" && network != "2" && network != "unknown"){  // unknown是为了兼容Chrome Canary
            wifi = false;
        }
    }
window.networkWIFI = wifi;

2. 仅判断有无网络

        //判断网络状态
            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;
                    }
                }
            };
            EventUtil.addHandler(window, "online", function () {
//        alert("Online");
            });
            EventUtil.addHandler(window, "offline", function () {
                alert("您已处于离线状态");
            });