关于这个事件的描述到处都有,但基本上都是说离线在线什么的我一下子还没反应过来。后再在这里看到了一句话:"断开网络再联网试试,就可以看到连线的提示。"这才反应过来,原来指的是网络状态。

  我用来测试ononline事件和onoffline事件的例子:

 <body ononline="onFunction()" onoffline="offFunction()">
<p>测试ononline事件和onoffline事件</p>
<script type="text/JavaScript">
function onFunction() {
alert("现在你的浏览器有网络,在线工作");
}
function offFunction() {
alert("现在你的浏览器没有网络,离线工作");
}
</script>
</body>

  测试方法:打开这个页面,切断网络,就会触发

  

  (我用的录制GIF的软件不能录制任务栏,反正就是我先断网,然后再联网。)

  你启动这个页面是不会触发ononline和onoffline事件的,得网络状态发生变化才触发。如果想要在页面打开的时候就判断现在是在线状态还是离线状态,可以使用一个只读属性:navigator.onLine

 <body onload="loadOver()">
<p>测试ononline事件和onoffline事件</p>
<script type="text/JavaScript">
function loadOver() {
var x = document.getElementsByTagName("p")[0];
if(navigator.onLine){
x.innerHTML = "在线工作";
}
else {
x.innerHTML = "离线工作";
}
}
</script>
</body>

  运行效果如下: 

 

  

  

JavaScript中的ononline事件和onoffline事件的更多相关文章

  1. JavaScript中,有三种常用的绑定事件的方法

    要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的 ...

  2. 让你高效的理解JavaScript中的同步、异步和事件循环

    "同步请求","异步请求"相信这两词在程序猿的世界中频频出现,到底是词性的妖娆,还是撸代码的基础要求,下面直接分享本人学习的好东西,保证让你深入浅出,爽得不要不 ...

  3. javascript中区分鼠标单击和拖动事件

    在javascript中,一般的DOM元素如div,都有onmousedown.onmousemove.onmouseup这3个鼠标事件. <div id="div1" on ...

  4. javascript 中 keyup、keypress和keydown事件

    keyup.keypress和keydown事件都是有关于键盘的事件 1. keydown事件在键盘的键被按下的时候触发,keyup 事件在按键被释放的时候触发    keydown.keypress ...

  5. javascript中事件总结&通用的事件侦听器函数封装&事件委托

    前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...

  6. JS 中的事件绑定、事件监听、事件委托

    事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...

  7. JS 中的事件绑定、事件监听、事件委托是什么?

    在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScri ...

  8. JavaScript中错误正确处理方式,你用对了吗?

    JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化.如果将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出.理论上 ...

  9. JS 事件绑定、事件监听、事件委托详细介绍

    原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...

随机推荐

  1. runtime统计页面数据或者统计按钮的点击次数

    一.按钮的点击统计 有的时候我们遇见这样的需求,让我们统计用户点击我们页面的动作的次数给与用户以统计,供以后给客户端推送不同的页面数据,这时候我们就会用到iOS的黑魔法(runtime). 首先我们不 ...

  2. JS之代理模式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. windows7 下jdk1.8 改为 1.7过程,及环境变量配置;

    一. 安装完成后 当然是配置环境变量: JAVA_HOME 是我们以后用到jdk所在位置的内容时为了方便,给jdk起的名字,也是java程序约定的变量名,如果没有,当你在cmd 输入 java  ja ...

  4. spring cloud 的自我保护机制

    spring cloud 的自我保护机制定义: 自我保护模式是:在出现网络异常波动的情况下,使用自我保护模式使eureka 集群更加健壮,稳定. 自我保护机制是:在15分钟内客户端没有雨注册中心发生心 ...

  5. NHibernate4使用Oracle.ManagedDataAccess.dll连接oracle及配置多个数据库连接

    NHibernate数据库配置参数在hibernate.cfg.xml中 <?xml version="1.0" encoding="utf-8"?> ...

  6. mysql 存储 2

    mysql> create database db1; mysql> use db1; mysql> create table PLAYERS as select * from TE ...

  7. LOJ 10002 喷水装置 未完

    #include<bits/stdc++.h> using namespace std; int T,n,l,w; ; struct S{ double s,t; }a[maxn]; bo ...

  8. 抽象鸡类 abstract(抽象) base(基础) class(类型)

    # --> ''' class interface 接口: 建立关联的桥梁, 方便管理代码 (python中没有接口语法) 接口类: 用来定义功能的类 为继承它的子类提供功能 该类的功能法方法一 ...

  9. java web从入门到精通

    1.Springboot配置 1.1mybatis mapper.xml所在的目录必须为resource的资源文件夹,如果xml文件在java的package里面,需要修改文件夹类型 idea修改方式 ...

  10. chrome window 下的所有key josn

    ["postMessage","blur","focus","close","parent",&qu ...