检查互联网连接并显示弹出窗口

Posted 2023-04-19

【中文标题】检查互联网连接并显示弹出窗口

【英文标题】：check internet connection and show popup

【发布时间】：2014-12-09 11:18:39

【问题描述】：

我正在使用 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);
    );
   

配置.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" />

请帮帮我 提前致谢。

【问题讨论】：

监听offline 和online 事件是这样做的方法。你能解释一下你是如何测试这段代码的吗？在设备上，使用飞行模式，...？

我在没有互联网连接的设备上进行了测试，它直接显示我的网页不可用。

您是否确认安装了网络信息插件？ （请参阅下面的答案。）

【参考方案1】：

最简单的网络状态WEB解决方案

Web API -> 导航器 -> 在线和离线事件

了解用户何时下线，以便您可以将服务器请求排队以备后用。

知道用户何时恢复在线，以便您可以与服务器重新同步。

window.addEventListener('load', () => 
  const status = document.getElementById("status");
  const log = document.getElementById("log");

  function updateOnlineStatus(type) 
    const condition = navigator.onLine ? "? You're Back online ?" : "? Sorry, You're offline ?";

    status.className = condition;
    status.innerHTML = condition;

    log.insertAdjacentHTML("beforeend", `$ Event -> $type; Status MSG: $condition`);
  

  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
);

测试

打开Dev-tools Console 转到Network > Network Throttling 更改为Offline

改回No Throttling

window.addEventListener('load', () => 
  const status = document.getElementById("status");
  const log = document.getElementById("log");

  function updateOnlineStatus(type) 
    const condition = navigator.onLine ? "? You're Back online ?" : "? Sorry, You're offline ?";

    status.className = condition;
    status.innerHTML = condition;

    log.insertAdjacentHTML("beforeend", `$ Event -> $type; Status MSG: $condition`);
  

  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
);

body 
  background: #010025;


p 
  color: white;
  font-size: 24px;
  padding: 5%;
  text-align: center;


#status 
  position: fixed;
  width: 100%;
  color: #FFF;
  padding: 0.5em 0;
  border-radius: 5px;
  text-align: center;
  font: bold 1em sans-serif;
  text-transform: uppercase;
  box-shadow: 5px 5px 10px black;


#log 
  padding: 2% 5%;
  font: 0.8em sans-serif;
  color: greenyellow;
  background: #020018;
  border-radius: 15px;
  border: 2px double;


.online 
  background: green;


.offline 
  background: red;

<div id="status"></div>
<p>This is an Online and offline events test ?</p>
<div id="log"></div>

继续编码！ ??

【参考方案2】：

既然你没提，请确保你已经安装了网络信息插件：https://github.com/apache/cordova-plugin-network-information/blob/master/doc/index.md

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

【讨论】：

我下载了this，但不知如何使用它，任何想法