我在检查设备是否没有互联网连接时遇到问题。我正在使用cordova 5.0.0 CLI。这是我的代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="no-padding pro-list">
<li><a href="#" class="pro-1 pro">A</a>
<div class="proc-description panel-1">
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
</div>
</li>
<li><a href="#" class="pro-2 pro">B</a>
<div class="proc-description panel-2">
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
</div>
</li>
<li><a href="#" class="pro-3 pro">C</a>
<div class="proc-description panel-3">
<p>a</p>
<p>b</p>
<p>c</p>
</div>
</li>
<li><a href="#" class="pro-4 pro">D</a>
<div class="proc-description panel-4">
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
</div>
</li>
<li><a href="#" class="pro-5 pro">E</a>
<div class="proc-description panel-5">Hello world! Lorem ipsum doner inut.
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
</div>
</li>
<li><a href="#" class="pro-6 pro">F</a>
<div class="proc-description panel-6">
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
</div>
</li>
<li><a href="#" class="pro-7 pro">G</a>
<div class="proc-description panel-7">
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
</div>
</li>
<li><a href="#" class="pro-8 pro">H</a>
<div class="proc-description panel-8">
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
</div>
</li>
<li><a href="#" class="proc-9 ">I</a>
</li>
<li><a href="#" class="proc-10 ">J</a>
</li>
<li><a href="#" class="proc-11 ">K</a>
</li>
</ul>
问题是:它总是如此。我该如何解决?我知道这个plugin,但我不知道我是怎么做到的。我知道如何添加插件,但它结束了。有人可以帮助我使这个插件工作,或者一个替代代码来检查用户是否离线?提前致谢
答案 0 :(得分:3)
Cordova插件在您的Web应用程序和移动操作系统的本机API之间创建了一个桥梁。为了使用原生方,你必须等到cordova准备好。如果您想检查用户是在线还是离线,您可以添加问题中链接的插件,然后像这样使用它:
首先创建一个将返回true
或false
的函数,具体取决于用户是否在线:
function checkConnection(){
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.CELL] = 'Cell generic connection';
states[Connection.NONE] = 'No network connection';
if(states[networkState].indexOf("WiFi") != -1 || states[networkState].indexOf("Cell") != -1)
return true;
return false;
}
当您获得设备就绪事件时:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use device APIs
var connected = checkConnection();//will return true or false
if(connected){
//user is online
}else{
//user is offline
}
}
您也可以直接收听此类online
和offline
事件:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use device APIs
document.addEventListener("online", onOnline, false);
document.addEventListener("offline", onOffline, false);
}
function onOnline() {
// User is Online
}
function onOffline() {
// User is Offline
}
这两种方法都需要添加network-information
插件。请阅读documentation了解详情。
答案 1 :(得分:2)
将其添加到index.html:
document.addEventListener("offline", function(){ navigator.notification.alert("No connection found") }, false);
如果没有网络连接,它会提醒您。
如果您没有通知插件:
document.addEventListener("offline", function(){ alert("No connection found") }, false);