Fe-interview: [js] 第219天 写一个网络不通时则提醒用户的方法

[haizhilin2013]

第219天 写一个网络不通时则提醒用户的方法

我也要出题

[NicholasBaiYa]

var i = new Image();
i.src = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png?t=' + Date.parse(new Date());
i.onload = function() {
    alert('ok');
};
i.onerror = function() {
    alert('fail');
};

[lcyuhe]

window.ononline=function(){
alert('online now')
}

window.onoffline=function(){
alert('offline now')
}

[lcyuhe]

window.ononline、window.onoffline据说有兼容性问题（具体能兼容哪些浏览器我没查到，望知道的好心人能告知下），下面这种做法兼容性上更好些

window.addEventListener('online',function(){
alert('online now');
});

window.addEventListener('offline',function(){
alert('offline now');
});

[warnerhu]

window.ononline、window.onoffline据说有兼容性问题（具体能兼容哪些浏览器我没查到，望知道的好心人能告知下），下面这种做法兼容性上更好些

window.addEventListener('online',function(){
alert('online now');
});

window.addEventListener('offline',function(){
alert('offline now');
});

在CanIUse上查了下ononline ，兼容性确实差点，实测IE11也返回null，不过navigator.online各家浏览器支持得很不错。

[simplefeel]

检测是否处于在线状态，如何判断在线状态（onLine）？通俗的讲可能就是是否联网，然而有可能是处于局域网，虽然没有连接万维网，如果服务可达也可称为onLine状 态。因而，单纯的判断网络是否联通并不能完整的检测onLine状态，故增加XHR请求来协助判断。

/**
 * @description: 检测当前url主机地址是否可达
 * @return: true 服务器可达（online） false 服务器不可达(offline)
 */
function serverReachable() {
    let xhr = new(window.ActiveXObject || XMLHttpRequest)("Microsoft.XMLHTTP");
    xhr.open("HEAD", "//" + window.location.hostname + "/?rand=" + Math.random(), false);
    try {
        xhr.send();
        status = xhr.status;
        return status >= 200 && status < 300 || status === 304
    } catch (error) {
        return false
    }
}

/**
 * @description: 检测浏览器是否处于联网状态
 * @return: true 联网 false 没有联网
 */
function networkReachable() {
    return navigator.onLine
}

/**
 * @description: 检测数据是否是布尔类型
 * @param {type} 数据
 * @return: true: 是布尔类型 false: 不是布尔类型
 */
function isBoolean(value) {
    return Object.prototype.toString.call(value) === "[object Boolean]"
}

/**
 * @description: 检测是否处于在线状态
 * @return: true: 在线（onLine） false: 非在线（offLine）
 */
export default function checkIsOnLine() {
    let networkStatus = networkReachable();
    if (isBoolean(networkStatus)) {
        if (networkStatus) {
            return true
        } else if (serverReachable()) {
            return true
        } else {
            return false
        }
    } else {
        // 浏览器不支持onLine属性，降级使用服务是否可达来判断
        return serverReachable()
    }
}