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

时间: 2024-10-11 11:46:43

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

通过JS判断联网类型和连接状态

通过JS判断联网类型和连接状态 中国的移动网络环境复杂,为了给用户带去更好访问体验,开发者希望能了解用户当前的联网方式,然后给用户一个符合当前网络环境的请求结果. W3C的规范中给出了一个方法来获得现在的网络状态navigator.connection:根据Working Draft 29 November 2012协议规范我们可以从接口中获得bandwidth(带宽,M/s)和metered两个参数的值:还提供了一个监听方法,来时刻监听接入环境的变化情况.现实中我们发现很多浏览器并没有返回ba

js判断用户是否正在滚动滚动条,滚动条滚动是否停止

js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动,这个怎么做呢? 如果能时时判断 用户是否在滚动就好了? 或者能够 知道滚动开始 和 结束事件 也行? 可惜均不知道! 目前,仅可以利用的就是div元素的滚动事件,下面是我的实现思路,如何判断用户是否滚动停止? 1.html代码 <div id="panel"> <div

js判断用户的浏览器设备是移动端还是pc端

最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="text/javascript"> function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "i

JS判断用户是否在线的方法

在以前坐项目的时候,经常碰见通过sessionLisnter来判断用户是否在线的方法,但是由于用户关闭浏览器时不会立刻是否session,因此大部分时候都考虑在页面中通过JS来监控页面是否关闭. 网络上常见的方法有: window.onbeforeunload window.onunload 众说纷纭,经过实验:(IE11,chrome,FireFox) window.onbeforeunload:三个浏览器在通过右上角关闭按钮来关闭的时候,会触发事件.但是页面通过F5来刷新的时候也会触发事件.

用百度siteapp的uaredirect.js判断用户访问端而进行域名的自动跳转

首先在你的head中嵌入这段代码 <script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script> <script type="text/javascript">uaredirect("http://m.caijiayou.com","

[JS] js 判断用户是否在浏览当前页面

var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null; var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); var onVisibilityChan

js判断用户进入设备代码

var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0

js判断用户是输入的地址请求的路径

1 /** 2 * 如果是直接输入url访问的则刷新页面(防止缓存页面)针对Chrome,其他浏览器刷新referrer始终会为空,所以给个随机路径访问就加载不到缓存了. 3 */ 4 var userAgent = navigator.userAgent; // 获得浏览器的userAgent字符串 5 if(userAgent.indexOf("Chrome") > -1) { 6 if(document.referrer == "") { 7 docum

在浏览器中如何用js判断用户是通过点击的链接进来的页面,还是直接通过输入url地址栏进来的页面。

<script> if (document.referrer=="") { alert("直接输入地址或者使用特殊跳转!"); window.location.href="/"; } </script>