(文中对兼容性的测试还未全部完成)
通过对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