（文中對兼容性的測試還未全部完成）
通過對html5的navigator新特性的onLine屬性判斷，可輕松搞定是否在線的判斷（true：在線；false：離線）。
兼容性：
（已測）IE6+、Safari 5+支持的比較好；
（未測）Firefox 3+也支持navigator.onLine屬性，但你必須手工選中菜單項“文件-Web開發人員（設置）-脫機工作”才能讓瀏覽器正常的工作；
（未測）Chrome需要12以上；
1、代碼實現：
if(window.navigator.onLine==true) {
alert("首次 -- 已連接");
}else {
alert("首次 -- 未連接");
}
window.addEventListener("online", online, false);
window.addEventListener("offline", offline, false);
function online() { alert("重新連接"); }
function offline() { alert("連接斷開"); }
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("Offline"); });
3、分析及步驟：
為了檢測應用是否離線，通過監聽事件：online和offline。當網絡從離線變為在線或者從在線變為離線時，（在window對象上觸發）分別觸發這兩個事件。
首先：在頁面加載后，最好先通過navigator.onLine取得初始的狀態。
其次：通過對上述兩個事件的監聽來確定網絡連接狀態是否變化。（navigator.onLine屬性值）
水平有限，文中錯誤不妥在所難免，歡迎批評指正建議評論。文章將不定期修改完善斧正。謝謝！
本文參考自：HTML5離線功使用能詳解
http://www.educity.cn/wenda/11745.html