html5如何检测网络状态,H5判断网络状态

首先推荐一个网站，介绍H5 API的：https://github.com/AurelioDeRosa/HTML5-API-demos

netWork API:http://wicg.github.io/netinfo/

1.判断网络连接的网络状态

if (navigator.onLine) {

alert('online')

} else {

alert('offline');

}

想要监听浏览器的联网状态, 使用window.onOnline和window.onOffline事件:

window.addEventListener("offline", function(e) {alert("offline");})

window.addEventListener("online", function(e) {alert("online");})更为安全的做法：

var el = document.body;

if (el.addEventListener) {

window.addEventListener("online", function () {

alert("online");}, true);

window.addEventListener("offline", function () {

alert("offline");}, true);

}

else if (el.attachEvent) {

window.attachEvent("ononline", function () {

alert("online");});

window.attachEvent("onoffline", function () {

alert("offline");});

}

else {

window.ononline = function () {

alert("online");};

window.onoffline = function () {

alert("offline");};

}

注意，检测ononline事件,要绑定在window对象上

attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera

addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8