HTML5中对于网络是否断开的检测.很有意思哦
//事件的封装
var EventUtil = {
addHandler: function (element, type, handler) {//注册事件
if (element.addEventListener) {//非IE
element.addEventListener(type, handler, false);
}
else if (element.attachEvent) {//IE
element.attachEvent("on" + type, handler);
}
else {//dom0级
element["on" + type] = handler;
}
},
removeHandler: function (element, type, handler) {//取消注册事件
if (element.removeEventListener) {//非IE
element.removeEventListener(type, handler, false);
}
else if (element.detachEvent) {//IE
element.detachEvent("on" + type, handler);
}
else {//dom0级
element["on" + type] = null;
}
},
getEvent: function (event) {//返回event的引用
return event ? event : window.event;
},
getTarget: function (event) {//返回鼠标单击的目标对象
return event.target || event.srcElement;
},
preventDefault: function (event) {//取消默认事件(a的href,radio,checkbox,)
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
},
stopPropagation: function (event) {//因为这个EventUtil只支持冒泡,不支持事件捕获,所以这个方法只能阻止冒泡
if (event.stopPrapagation) {
event.stopPropagation();
}
else {
event.cancelBubble = true;
}
},
getRelatedTarget: function (event) {//获取相关元素
/*
页面中有一个div;当鼠标离开这个div时,事件的主目标是div,而相关元素是body.
mouseover:事件的主目标是获得光标的元素,而相关元素就是那个失去光标的元素.
mouseout:事件的主目标是失去光标的元素,而相关元素使获得光标的那个元素.
*/
if (event.relatedTarget) { return event.relatedTarget; }
else if (event.toElement) { return event.toElement; }
else if (event.fromElement) { return event.fromElement; }
else { return null; }
},
getButton: function (event) {//获取鼠标按钮的点击方式
if (document.implementation.hasFeature("MouseEvents", "2.0")) { return event.button; }
else {
switch (event.button) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0; //左击
case 2:
case 6:
return 2; //中间键
case 4:
return 1; //右击
}
}
}
}; //是否在线的判断:
window.onload = function () {
function addMessage(str) {
var oDiv = document.getElementById("line");
var oP = document.createElement("p");
oP.innerHTML = str;
oDiv.appendChild(oP);
}
EventUtil.addHandler(window, "online", function () {
addMessage("在线");
});
EventUtil.addHandler(window, "offline", function () {
addMessage("不在线");
});
}
<body>
在线检测;
<div id="line"></div>
</body>
测试环境:
结果:
HTML5中对于网络是否断开的检测.很有意思哦的更多相关文章
- 在c#中利用keep-alive处理socket网络异常断开的方法
本文摘自 http://www.z6688.com/info/57987-1.htm 最近我负责一个IM项目的开发,服务端和客户端采用TCP协议连接.服务端采用C#开发,客户端采用Delphi开发.在 ...
- 检测是否支持HTML5中的Video标签
//检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...
- 带你认识HTML5中的WebSocket
这篇文章主要介绍了带你认识HTML5中的WebSocket,本文讲解了HTML5 中的 WebSocket API 是个什么东东.HTML5 中的 WebSocket API 的用法.带Socket. ...
- HTML5中的服务器‘推送’技术 -Server-Sent Events
转帖:http://www.developersky.net/thread-63-1-1.html 一直以来,HTTP协议都是严格遵循Request-Response模型的.客户端发送一个Reques ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的
HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...
- HTML5 中 40 个最重要的技术点
介绍 我是一个ASP.NET MVC的开发者,最近在我找工作的时候被问到很多与HTML5相关的问题和新特性.所以以下40个重要的问题将帮助你复习HTML5相关的知识. 这些问题不是你得到工作的高效解决 ...
- 分析HTML5中WebSocket的原理
目录结构 一.什么是Websocket websocket是html5提出的一个协议规范,参考rfc6455. 不过目前还都是在草案,没有成为标准,毕竟html5还在路上. websocket约定 ...
- HTML5中的Web Workers
https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...
随机推荐
- [转]数据库更新(Update语句)查询
2011-03-27 10:40:11| 分类: Database |举报|字号 订阅原文出自:http://blog.csdn.net/ylnjust02/archive/2005/12/10/54 ...
- APP测试重点罗列
1.安装和卸载 应用是否可以在IOS不同系统版本或android不同系统版本上安装(有的系统版本过低,应用不能适配) 软件安装后是否可以正常运行,安装后的文件夹及文件是否可以写到指定的目录里. 安装过 ...
- 算法训练 Lift and Throw
算法训练 Lift and Throw 时间限制:3.0s 内存限制:256.0MB 问题描述 给定一条标有整点(1, 2, 3, ...)的射线. 定义两个点之间的距离为其下标之差 ...
- Java各种排序算法
Java各种排序算法详解 排序大的分类可以分为两种:内排序和外排序.在排序过程中,全部记录存放在内存,则称为内排序,如果排序过程中需要使用外存,则称为外排序.下面讲的排序都是属于内排序. 内排序有 ...
- 在word文档里提取出所有的邮箱地址
怎样在word文档里提取出所有的邮箱地址 文档内容太多,邮箱也有很多,一个个复制粘贴太浪费时间,怎样把这些邮箱简单的提取出来 答案:用查找功能. 查找目标:[A-z,0-9]{1,}\@[A-z,0 ...
- ThinkPHP3.2.3整合smarty模板（三）
在smarty模板中使用thinkphp框架的U方法时要主要的问题: 1.不能直接使用{:U('Index/index')}: 2.正确的使用方法为:<!--{U("Login/log ...
- Sql语句中两个比较迷糊的概念：“连接查询” 与 “外键约束”
Sql语句中两个比较迷糊的概念:“连接查询” 与 “外键约束 Sql 中的连接查询:就是为了避免笛卡尔积,因为涉及到多表查询的化,不使用连接查询,会先将多个互相乘,求出笛卡尔积,然后在在里面查询符合的 ...
- 使用pip install XX 命令时报错
在使用pip命令安装的时候,我遇到这样的报错: C:\Users\86962>pip install Appium-Python-Client Collecting Appium-Python- ...
- 解决安装vmware-tools出现的“The path "" is not a valid path to the 3.2.0-4-amd64 kernel headers”问题
在用虚拟机安装使用64位Crunchbang(一种Debian GNU/Linux 的linux)的过程中出现很多小问题.其中vmware-tools安装就是第一个问题. 在使用终端安装vmware- ...
- （转）C语言中scanf函数与空格回车
来源:http://blog.csdn.net/xia7139/article/details/14522493