`
鹤惊昆仑
  • 浏览: 230056 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

浏览器在线或离线状态检测

阅读更多
firefox3和IE8均提供了离线(offline)和在线(online)事件,参考:
https://developer.mozilla.org/En/Online_and_offline_events
http://msdn.microsoft.com/en-us/library/cc304129(VS.85).aspx
据传,webkit也支持offline事件,但我没有找到相关资料。

除此以外,有没有跨浏览器的检测手段哪?比如在IE6下面如何检测浏览器已经离线,web应用需要转入离线应用状态(比如使用google gear)。

基本思路有一个:定时轮训。网络上搜索一番后发现dojo有这方面的插件:dojox.off.offline--http://www.dojotoolkit.org/book/dojo-book-0-9/part-5-dojox/dojo-offline/using-dojo-offline。 就是每隔5秒钟发一个ajax请求(向一个非常小的文本文件发请求),在超时回调里判断客户端浏览器已经离线。
	_startNetworkThread: function(){
		if(!this.doNetChecking){
			return;
		}
		window.setInterval(dojo.hitch(this, function(){	
			var d = dojo.xhrGet({
				url:	 	this._getAvailabilityURL(),
				handleAs:	"text",
				timeout: 	this.NET_CHECK * 1000,
				error:		dojo.hitch(this, 
								function(err){
									if(this.isOnline){
										this.isOnline = false;
										try{
											if(typeof d.ioArgs.xhr.abort == "function"){
												d.ioArgs.xhr.abort();
											}
										}catch(e){}
										dojox.off.sync.isSyncing = false;
										this.onNetwork("offline");
									}
								}
							),
				load:		dojo.hitch(this, 
								function(data){
									if(!this.isOnline){
										this.isOnline = true;
										this.onNetwork("online");
									}
								}
							)
			});

		}), this.NET_CHECK * 1000);
	}


应该还有其他检测手段,比如借助于flash、Silverlight、检测图片(onerror事件)等。

刚才又搜索到一个Jquery的方案:
http://jamazon.co.uk/web/2008/06/17/publish-subscribe-with-jquery/
$.networkDetection = function(url,interval){
	var url = url;
	var interval = interval;
	online = false;
	this.StartPolling = function(){
		this.StopPolling();
		this.timer = setInterval(poll, interval);
	};
	this.StopPolling = function(){
		clearInterval(this.timer);
	};
	this.setPollInterval= function(i) {
		interval = i;
	};
	this.getOnlineStatus = function(){
		return online;
	};
	function poll() {
		$.ajax({
			type: "POST",
			url: url,
			dataType: "text",
			error: function(){
				online = false;
				$(document).trigger('status.networkDetection',[false]);
			},
			success: function(){
				online = true;
				$(document).trigger(’status.networkDetection’,[true]);
			}
		});
	};
};
分享到:
评论

相关推荐

    isoffline一个小型276B库用于检测离线状态并响应浏览器中的更改

    这包括对旧版IE浏览器的支持,以及对Service Worker等现代特性下离线状态检测的优化。 在实际应用中,`is-offline`可以帮助开发者实现以下功能: - **离线提示**:当用户失去网络连接时,显示友好的提示信息。 - *...

    腾讯X5内核离线使用Demo

    AppCache定义了一个离线应用的缓存清单,使得在离线状态下可以访问指定的网页;而Service Worker则更加灵活,可以在后台运行,拦截网络请求,实现更精细的缓存控制和数据同步。 在"OfflineX5Demo"中,可能包含了...

    离线浏览器Portable Offline Browser

    这款国外开发的优秀离线浏览器具有诸多功能和优势,使得用户在离线状态下的浏览体验尽可能接近在线模式。 首先,离线浏览器Portable Offline Browser的核心功能是其强大的网站下载能力。用户可以指定一个网站的URL...

    谷歌浏览器的vue tool离线包 shells插件,无需安装

    这样,即使在离线状态下,你也可以在谷歌浏览器中使用Vue DevTools进行调试。 Vue DevTools的特性包括: 1. 实时查看组件树:可以看到Vue应用中的所有组件及其层级关系。 2. 数据监控:查看并修改组件的data、...

    [MDN搬运]Firefox OS开发的学习_04_在线及离线事件

    当设备从离线状态变为在线,或者反之,浏览器会触发相应的事件。通过监听这些事件,开发者可以更新UI,提示用户当前的网络状态,或者执行相应的恢复操作。 ```javascript window.addEventListener('online', ...

    使用 HTML5 开发离线应用

    离线状态检测是另一个重要的方面。HTML5提供了`navigator.onLine`属性来检测浏览器当前是否在线。开发者可以监听`online`和`offline`事件,当网络状态改变时执行相应的回调函数,以提供合适的用户体验。 此外,...

    html5离线存储课程代码

    这样,在离线状态下,浏览器可以使用已缓存的资源来展示页面。 IndexedDB则是一个更为强大的数据库系统,它提供了结构化的数据存储能力,支持复杂的查询操作。与Cookie和LocalStorage相比,IndexedDB具有更大的存储...

    react-React的离线和在线组件

    React中处理离线和在线状态不仅涉及到简单的网络状态检测,还包括实时响应网络变化的组件、更高级的库如`react-detect-offline`,以及Service Worker实现的离线缓存。通过这些方法,开发者可以构建出更加健壮、适应...

    HTML5新特性-离线功能应用.docx

    二是`window.addEventListener('online/offline', callback)`事件监听器,可以捕获在线或离线状态的变化,从而根据网络状态执行相应的逻辑。 3. 本地数据存储: 当用户离线时,HTML5提供了DOM Storage(包括`...

    HTML5_离线存储技术

    2. **在线状态检测**:HTML5提供了`navigator.onLine`属性,可以检测浏览器当前是否在线,从而决定是否显示离线提示或者加载离线内容。 3. **事件监听**:可以监听`online`和`offline`事件,当网络状态改变时执行...

    html5离线存储

    2. **window.ononline和window.onoffline事件**:当浏览器从离线转为在线或反之亦然时触发。 **示例代码**: ```javascript if (navigator.onLine) { // 在线状态下的操作 } else { // 离线状态下的操作 } ...

    前端项目-offline-js.zip

    本文将围绕"前端项目-offline-js.zip"这一主题,深入探讨如何利用JavaScript库offline-js来实现浏览器离线状态的自动检测和离线应用的功能。 首先,我们要理解"Automatically detect when a browser is offline"这...

    html5离线处理实例

    - **缓存与同步**:在离线状态下,用户的数据可以先存储在Web Storage或IndexedDB中,等到网络恢复后再同步到服务器,确保数据的完整性和一致性。 4. **实际应用** - **离线地图**:地图应用可以利用HTML5离线...

    通信光缆在线、离线监测解决方案.doc

    在线测试可以在不影响正常通信的情况下持续监测光缆状态,离线测试则用于在光缆闲置或已知故障时进行深入分析。 2. **实时告警与快速定位**:系统能够迅速检测到光缆的任何异常,如光特性劣化、障碍等,并通过声光...

    ASP.NET 多笔数据离线编辑

    在ASP.NET中,可以使用ViewModel或者Service来跟踪当前的离线状态,以及用户尚未同步的数据。同时,需要处理各种可能的网络错误,如超时、重试机制以及错误通知。 **6. 安全性与权限** 离线编辑还涉及到数据安全和...

    chrome插件 vue-devtools离线安装包

    Chrome插件Vue DevTools是Vue.js开发过程中不可或缺的工具,它为开发者提供了一套强大的调试功能,如实时查看组件状态、检测性能、修改数据等。 Vue Devtools 5.3.3 版本是该插件的一个稳定版本,可以从GitHub上...

    Google离线地图,通过demo.html可以直接打开

    这些本地存储机制可以在浏览器端持久化数据,即使在离线状态下也能访问。 4. **构建离线地图应用**:在"demo.html"中,你需要编写JavaScript代码来处理地图显示。当检测到网络不可用时,应用应从本地存储读取地图...

    强大的离线浏览器汉化版TeleportProV1·54汉化版

    比如,一些依赖服务器端动态生成的内容可能无法正常显示,某些需要实时更新的数据(如股票价格、新闻动态)在离线状态下将无法获取。此外,对于大型网站,下载可能需要较长的时间和较大的存储空间。 总的来说,离线...

    leaflet + h5 制作离线地图

    7. **离线处理**:当检测到用户处于离线状态时,Service Worker将自动使用本地缓存的数据。 8. **添加交互元素**:利用Leaflet提供的API,如`L.marker`、`L.polyline`、`L.polygon`等,动态在地图上添加标记、线条和...

    Python-在esp8266上面开发一款chrome浏览器离线时可玩的那款恐龙跳仙人掌的游戏

    这个项目的目标是将谷歌Chrome浏览器中经典的离线小游戏——恐龙跳仙人掌移植到ESP8266上,让用户即使在网络不可用的情况下也能继续享受游戏的乐趣。 首先,我们需要了解这个游戏的基本原理。Chrome的恐龙游戏是一...

Global site tag (gtag.js) - Google Analytics