如何在Javascript中检测网络丢失？

Question

我的Web应用程序适用于多种手持设备,如iPad Galaxy选项卡等.应用程序从服务器请求图像并在客户端上呈现.

现在问题有时发生,在渲染图像期间网络连接丢失,而不是设备上显示html无图像图标的时间......

我想优雅地处理这种情况,在网络丢失的时候,我想捕获它并向用户显示没有网络连接或其他东西的警报......

我尝试用户navigator.onLine事件..但它不适用于我支持的所有浏览器集,mozilla等5-6版本.

而且我的应用程序将只在wifi本地网络上运行...可能或可能没有连接到互联网 ..在该诉讼中也会这样navigator.onLine工作..？

请提供给我任何其他更好的方法来做到这一点......

Answer 1

您可以向服务器发出一些 XHR 请求并检查返回的状态。

如果是0，则表示连接丢失。

所以，像这样的东西可以给你一些实用功能：

function isOnline ( callback ) {
    var xhr = new XMLHttpRequest( )
    xhr.onreadystatechange = function ( ) {
        // Make sure the request is finished
        if ( xhr.readyState === 4 ) {
            // There is the magic
            if ( xhr.status === 0 ) {
                callback( false )
            }
            else {
                callback( true )
            }
        }
    }
    xhr.open( '/some/url' )
    xhr.send( )
}

// Usage example:
isOnline( function ( status ) {
    if ( status ) {
        // You're online
    }
    else {
        // You're not online
    }
} )

PS：我跳过了该对象的 IE 合规部分xhr，但添加起来很容易。这个更要领悟一下。