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]);
}
});
};
};
分享到:
相关推荐
这包括对旧版IE浏览器的支持,以及对Service Worker等现代特性下离线状态检测的优化。 在实际应用中,`is-offline`可以帮助开发者实现以下功能: - **离线提示**:当用户失去网络连接时,显示友好的提示信息。 - *...
AppCache定义了一个离线应用的缓存清单,使得在离线状态下可以访问指定的网页;而Service Worker则更加灵活,可以在后台运行,拦截网络请求,实现更精细的缓存控制和数据同步。 在"OfflineX5Demo"中,可能包含了...
这款国外开发的优秀离线浏览器具有诸多功能和优势,使得用户在离线状态下的浏览体验尽可能接近在线模式。 首先,离线浏览器Portable Offline Browser的核心功能是其强大的网站下载能力。用户可以指定一个网站的URL...
这样,即使在离线状态下,你也可以在谷歌浏览器中使用Vue DevTools进行调试。 Vue DevTools的特性包括: 1. 实时查看组件树:可以看到Vue应用中的所有组件及其层级关系。 2. 数据监控:查看并修改组件的data、...
当设备从离线状态变为在线,或者反之,浏览器会触发相应的事件。通过监听这些事件,开发者可以更新UI,提示用户当前的网络状态,或者执行相应的恢复操作。 ```javascript window.addEventListener('online', ...
离线状态检测是另一个重要的方面。HTML5提供了`navigator.onLine`属性来检测浏览器当前是否在线。开发者可以监听`online`和`offline`事件,当网络状态改变时执行相应的回调函数,以提供合适的用户体验。 此外,...
这样,在离线状态下,浏览器可以使用已缓存的资源来展示页面。 IndexedDB则是一个更为强大的数据库系统,它提供了结构化的数据存储能力,支持复杂的查询操作。与Cookie和LocalStorage相比,IndexedDB具有更大的存储...
React中处理离线和在线状态不仅涉及到简单的网络状态检测,还包括实时响应网络变化的组件、更高级的库如`react-detect-offline`,以及Service Worker实现的离线缓存。通过这些方法,开发者可以构建出更加健壮、适应...
二是`window.addEventListener('online/offline', callback)`事件监听器,可以捕获在线或离线状态的变化,从而根据网络状态执行相应的逻辑。 3. 本地数据存储: 当用户离线时,HTML5提供了DOM Storage(包括`...
2. **在线状态检测**:HTML5提供了`navigator.onLine`属性,可以检测浏览器当前是否在线,从而决定是否显示离线提示或者加载离线内容。 3. **事件监听**:可以监听`online`和`offline`事件,当网络状态改变时执行...
2. **window.ononline和window.onoffline事件**:当浏览器从离线转为在线或反之亦然时触发。 **示例代码**: ```javascript if (navigator.onLine) { // 在线状态下的操作 } else { // 离线状态下的操作 } ...
本文将围绕"前端项目-offline-js.zip"这一主题,深入探讨如何利用JavaScript库offline-js来实现浏览器离线状态的自动检测和离线应用的功能。 首先,我们要理解"Automatically detect when a browser is offline"这...
- **缓存与同步**:在离线状态下,用户的数据可以先存储在Web Storage或IndexedDB中,等到网络恢复后再同步到服务器,确保数据的完整性和一致性。 4. **实际应用** - **离线地图**:地图应用可以利用HTML5离线...
在线测试可以在不影响正常通信的情况下持续监测光缆状态,离线测试则用于在光缆闲置或已知故障时进行深入分析。 2. **实时告警与快速定位**:系统能够迅速检测到光缆的任何异常,如光特性劣化、障碍等,并通过声光...
在ASP.NET中,可以使用ViewModel或者Service来跟踪当前的离线状态,以及用户尚未同步的数据。同时,需要处理各种可能的网络错误,如超时、重试机制以及错误通知。 **6. 安全性与权限** 离线编辑还涉及到数据安全和...
Chrome插件Vue DevTools是Vue.js开发过程中不可或缺的工具,它为开发者提供了一套强大的调试功能,如实时查看组件状态、检测性能、修改数据等。 Vue Devtools 5.3.3 版本是该插件的一个稳定版本,可以从GitHub上...
这些本地存储机制可以在浏览器端持久化数据,即使在离线状态下也能访问。 4. **构建离线地图应用**:在"demo.html"中,你需要编写JavaScript代码来处理地图显示。当检测到网络不可用时,应用应从本地存储读取地图...
比如,一些依赖服务器端动态生成的内容可能无法正常显示,某些需要实时更新的数据(如股票价格、新闻动态)在离线状态下将无法获取。此外,对于大型网站,下载可能需要较长的时间和较大的存储空间。 总的来说,离线...
7. **离线处理**:当检测到用户处于离线状态时,Service Worker将自动使用本地缓存的数据。 8. **添加交互元素**:利用Leaflet提供的API,如`L.marker`、`L.polyline`、`L.polygon`等,动态在地图上添加标记、线条和...
这个项目的目标是将谷歌Chrome浏览器中经典的离线小游戏——恐龙跳仙人掌移植到ESP8266上,让用户即使在网络不可用的情况下也能继续享受游戏的乐趣。 首先,我们需要了解这个游戏的基本原理。Chrome的恐龙游戏是一...