如何在 Javascript 中检测网络丢失

How to Detect Network Loss in Javascript?

本文关键字：网络 检测 Javascript      更新时间：2023-09-26

我的Web应用程序可以在多个手持设备上工作，如iPad Galaxy选项卡等。 应用程序从服务器请求图像并在客户端上呈现。

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

我想

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

我试图用户navigator.onLine事件..但它不适用于我支持的所有浏览器集，例如 Mozilla 上的 5-6 版本等。

而且我的应用程序将仅在 wifi 本地网络上运行......可能连接到互联网，也可能没有连接到互联网。在那个适合中，这个navigator.onLine也起作用..？

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

您可以对服务器执行一些 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：我跳过了xhr对象的IE合规性部分，但是添加起来很容易。这更多的是为了得到这个想法。

例如，您可以使用

<img src="..." onerror="noConnection()">

因此，如果未加载图像，将调用noConnection方法。

更多信息在这里： jQuery/JavaScript 替换损坏的图像

相关文章：