Js - 判断用户是否上网(连接网络) - HTML5在线、离线online的使用

(文中对兼容性的测试还未全部完成)


通过对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
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值