最簡單粗暴的方式就是加載網絡資源，JS文件或者圖片文件。
用jQuery變量來檢測是否聯網
function doConnectFunction() { return true;}function doNotConnectFunction() { return false;} var i = new Image();i.onload = doConnectFunction;i.onerror = doNotConnectFunction;i.src = 'http://su.bdimg.com/static/superplus/img/logo_white.png?d=' + escape(Date());加載網絡資源的問題就是檢測的互聯網，如果是局域網檢測是無能為力了。
這時候需要一個更好的解決方案，就要用到navigator.onLine，這個屬性比較坑的就是瀏覽器兼容，chrome、Safari 都完美支持，IE7以上是支持的。火狐和IE6比較坑，只有在瀏覽器“脫機狀態”下才返回false，其他都返回true。掐了網線都是true，Opera直接不支持了。
所以還得加一個兼容方法：給location.hostname地址發一個http頭請求，代碼如下：
var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );var status;xhr.open( "HEAD", "http://" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false ); try { xhr.send(); return ( xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 ); } catch (error) { return false; }里面一個要注意的就是open方法的第三個參數要傳false，必須是同步請求。
總結：支持navigator.onLine的瀏覽器就用navigator.onLine，不支持的就發一個http頭請求。
原創文章，轉載請注明： 轉載自前端開發
新聞熱點
疑難解答
