我对设计用于多个浏览器的网页进行了跨浏览器在线/离线测试。它适用于免费指标:
- 窗口上的事件监听器
- document.body 上的事件监听器
- 轮询 navigator.onLine 变量
window.addEventListener("online", function() {
document.getElementById('test1').innerHTML = "online";
}, false);
window.addEventListener("offline", function() {
document.getElementById('test1').innerHTML = "OFFLINE";
}, false);
document.body.ononline = function() {
document.getElementById('test2').innerHTML = "online";
};
document.body.onoffline = function() {
document.getElementById('test2').innerHTML = "OFFLINE";
};
setInterval(function () {
if (navigator && navigator.onLine)
document.getElementById('test3').innerHTML = "online";
else
document.getElementById('test3').innerHTML = "OFFLINE";
}, 500);
我在几个 iOS、Android 或笔记本电脑浏览器上成功使用了这段代码。
在特定的 iOS 7.1.1 设备上它不起作用。我已经成功地在其他 iOS 7.1.1 设备上对其进行了测试,但是在这个特定的设备上,当离线时,几秒钟 (~5) 后所有指标都恢复为“在线”。
我已经在多台设备上进行了测试,但只能在这个特定的设备上重现问题。我使用“飞行保存模式”按钮将其设为离线,不允许使用 wifi 或蓝牙,但几秒钟后,浏览器中触发在线事件,并且 navigator.onLine 变量变为 true……奇怪……
如果您对正在发生的事情有任何线索,我将很高兴与您交流。
如果您使用您的设备测试该页面,请随时发表评论,让我知道它是否适用于您的设备。谢谢