电话差距 - 将 css 更改为离线模式不起作用

Phonegap - Changing css for offline mode not working

本文关键字：离线 模式 不起作用 差距 css 电话      更新时间：2023-09-26

在onDeviceReady中，我正在尝试检测navigator.connection.type是否存在网络连接，如果不是，则显示带有离线内容的div，但它不起作用。 在设备上运行它（Z10）。

我的页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone-no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
    <title>Our Application</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.min.js"></script>
    <script src="js/mustache.js"></script>
    <script src="phonegap.js"></script>
</head>
<body onload="init()">
    <div data-role="page" id="main">
    <div data-role="header" class="logo">
        <img src="img/logo.png" />
    </div>
    <div data-role="content">
        <ul id="canlist" data-role="listview">
        </ul>
        <a href="#newcan" data-role="button" data-icon="plus">New can</a>
    </div>
    <div data-role="footer" data-theme="c">
        <h2 class="offline">Offline Mode</h2>
    </div>
</div>
<div data-role="page" id="newcan">
    <div data-role="header" class="logo">
        <img src="img/logo.png" />
    </div>
    <div id="candetailcontent" data-role="content">
    </div>
    <div data-role="footer" data-theme="c">
        <p>Snapcan!</p>
    </div>
</div>
</div>
<script type="text/javascript"  charset="utf-8">
        function init() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        function onDeviceReady() {
            alert('ready');
            var networkstate = navigator.connection.type;
            if(networkstate == "none")
            {
                $(".offline").css("visibility","visible");
            }
        }
    </script>
</body>
</html>

我的索引.css：

.offline{
    visibility: hidden;
    color:  #f00;
    font-style:italic;
}

如果没有连接，那么红色的"离线模式"应该是可见的，但不是。 有什么想法吗？

我认为你应该尝试使用cordova的离线事件监听器。

您是否尝试过在离线类上使用 css 属性"display"，如果在线或"处于离线状态，则将其设置为"无"？

相关文章：