JavaScript中的ononline事件和onoffline事件
关于这个事件的描述到处都有，但基本上都是说离线在线什么的我一下子还没反应过来。后再在这里看到了一句话："断开网络再联网试试，就可以看到连线的提示。"这才反应过来，原来指的是网络状态。
我用来测试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事件的更多相关文章
- JavaScript中，有三种常用的绑定事件的方法
要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的 ...
- 让你高效的理解JavaScript中的同步、异步和事件循环
"同步请求","异步请求"相信这两词在程序猿的世界中频频出现,到底是词性的妖娆,还是撸代码的基础要求,下面直接分享本人学习的好东西,保证让你深入浅出,爽得不要不 ...
- javascript中区分鼠标单击和拖动事件
在javascript中,一般的DOM元素如div,都有onmousedown.onmousemove.onmouseup这3个鼠标事件. <div id="div1" on ...
- javascript 中 keyup、keypress和keydown事件
keyup.keypress和keydown事件都是有关于键盘的事件 1. keydown事件在键盘的键被按下的时候触发,keyup 事件在按键被释放的时候触发 keydown.keypress ...
- javascript中事件总结&通用的事件侦听器函数封装&事件委托
前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...
- JS 中的事件绑定、事件监听、事件委托
事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...
- JS 中的事件绑定、事件监听、事件委托是什么？
在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScri ...
- JavaScript中错误正确处理方式，你用对了吗？
JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化.如果将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出.理论上 ...
- JS 事件绑定、事件监听、事件委托详细介绍
原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...
随机推荐
- GridView（多选功能）
多选功能 将optionSelection下的MultiSelect修改为true开启多选,MultiSelectMode有三种模式可选,单元格选择,行选择,与checkBox选择,第三种选择方式会 ...
- shell练习题6
需求如下: 有日志access.log,部分内容如下: 127.0.0.1 - - [03/Jul/2018:00:00:01 +0800] "GET / HTTP/1.1" 20 ...
- struts2自定义转换器
Struts2自定义类型转换器分为局部类型转换器和全局类型转换器 (1)局部类型转换器 如果页面传来一个参数reg.action?birthday=2010-11-12到后台action,然后属性用d ...
- 策略模式（Strategy Model）
定义:一个类的行为或算法能在运行时被改变,将一组算法封装成一系列对象,通过这些对象灵活改变系统功能: 实现方式: 首先定义个strategy接口,然后创建一系列对象(strategy objects) ...
- MSBuild 命令参数
Build a Visual Studio project or solution using MSBuild Command Line Arguments 常用命令行参数 详解: MSBuild ...
- CentOS系统Nginx安装配置，随时更新
./configure --prefix=/etc/nginx \ #指定安装目录 --sbin-path=/usr/sbin/nginx \ #指定执行路径--conf-path=/etc/ngin ...
- org.hibernate.ObjectNotFoundException: No row with the given identifier exists: [com.zhuoshi.entity.Dep#1]
报错信息: org.hibernate.ObjectNotFoundException: No row with the given identifier exists: [com.zhuoshi.e ...
- （原创）Spice 网表范例
一.常规网表 Inverter .lib "D:\lib\l0040ll_v1p4_1r.lib" TT .param SUPPLY=.1V .param T=10ns .para ...
- 【oracle入门】SQL的命令动词
SQL的功能 命令动词 数据定义 CREATE,DROP,ALTER 数据操纵 SELECT,INSERT,UPDATE,DELETE 数据控制 CRANT,REVOKE
- scott 本月报将收录移动Web加速技术的主要进展，欢迎读者一起完善，投稿邮箱：openweb@baidu.com
_trackPageview 功能说明 用于发送某个URL的PV统计请求,适用于统计AJAX.异步加载页面,友情链接,下载链接的流量. 代码语法 _czc.push(["_trackPage ...