인터넷 연결 확인 및 팝업 표시

Question

jQuery Mobile 및 Phonegap (3.3)을 사용하여 모바일 응용 프로그램을 개발 중입니다.이 응용 프로그램에서 iframe에 웹 사이트를 표시하고 싶으므로 정기적으로 인터넷 연결을 확인하고 팝업이 필요합니다. 인터넷에 연결되어 있지 않습니다. 내 응용 프로그램에 이미지가 있고 메뉴로이 이미지를 사용하고 있습니다. 일부 이미지 링크는 인터넷에 연결되어 있으므로이 이미지를 클릭 할 때마다 인터넷 연결을 확인하고 인터넷에 연결되어 있지 않으면 팝업이 나타납니다.

<script type="text/javascript" charset="utf-8"> 
// Wait for PhoneGap to load 
document.addEventListener("deviceready", onDeviceReady, false); 
function onDeviceReady() { 
checkConnection(); 
} 

function checkConnection() { 
var networkState = navigator.network.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.NONE] = 'No network connection'; 
alert('Connection type: ' + states[networkState]); 
} 
</script> 

그것은 때 응용 프로그램이 시작 첫 번째 시간을 확인 : 나는이 시도.

이

<script type="text/javascript" charset="utf-8"> 

// Wait for PhoneGap to load 
// 
function onLoad() { 
document.addEventListener("deviceready", onDeviceReady, false); 
} 

// PhoneGap is loaded and it is now safe to make calls PhoneGap methods 
// 
function onDeviceReady() { 

} 
// alert dialog dismissed 
function alertDismissed() { 
// do something 
} 
function checkReachability() { 
var _check=true; 

var networkState = navigator.network.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.NONE] = 'No network connection'; 

//alert('Connection type: '+ networkState + states[networkState]); 
if(networkState==="unknown"){ 
_check=false; 
showAlert(); 
return _check; 
} 
else { 
return true; 
} 
} 
function showAlert() { 
navigator.notification.alert("Please connect your device to Internet.",onDeviceReady,"No Network  Connectivity","OK"); 
} 
</script> 
<img src="sample.png" id="img1" data-linkurl="#page2" onClick="checkReachability()"> 

내가 노력이 : 내가 이것을 시도

<script> 
document.addEventListener("offline", function() { 
alert("No internet connection"); 
}, false); 
</script> 

가 :

document.addEventListener("offline", onOffline, false); 
document.addEventListener("online", onOnline, false); 
function onOnline() { 
$.mobile.back(); 
} 
// 
function onOffline() { 
$.mobile.changePage("offline.html"); 
} 

난이 시도 :하지만 내가 이것을 시도 주기적으로

그것을 확인해야

function onDeviceReady(){ 
try{ 
    var networkState = navigator.connection && navigator.connection.type; 

    setTimeout(function(){ 
     networkState = navigator.connection && 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.NONE]  = 'No network connection'; 

     alert('Connection type: ' + states[networkState]); 
    }, 500); 
    }catch(e){ 
    alert(e); 
    $.each(navigator, function(key, value){ 
     alert(key+' => '+value); 
    }); 
    } 
} 

config.xml 파일 :

<gap:config-file platform="android" parent="/manifest"> 
    <uses-permission name="android.permission.ACCESS_NETWORK_STATE" /> 
</gap:config-file> 

<gap:config-file platform="android" parent="/manifest"> 
    <uses-permission name="android.permission.INTERNET" /> 
</gap:config-file> 

<gap:config-file platform="android" parent="/manifest"> 
    <uses-permission name="android.permission.READ_PHONE_STATE" /> 
</gap:config-file> 

<plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager" /> 
<plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/> 

androidmainfest.xml

<uses-permission android:name="android.permission.INTERNET" /> 
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 

guyz 나에게 고급의 감사 도와주세요. 당신이 그것을 언급하지 않았기 때문에

Answer 1

, 플러그인을 설치하면 네트워크 정보가 있는지 확인 : https://github.com/apache/cordova-plugin-network-information/blob/master/doc/index.md

cordova plugin add org.apache.cordova.network-information