技术求助：使用navigator.onLine与Google Material Icons检测用户在线/离线状态失败，寻求解决方法

没问题，我来帮你搞定这个功能！你的初始代码只是静态显示了离线图标，要实现动态切换，咱们需要结合navigator.onLine属性和浏览器的online/offline事件，再配合Material Icons的图标切换。下面是完整的可行方案：

第一步：确保Material Icons正确引入 #

首先要确认你的页面已经加载了Material Icons字体，可以通过本地引入字体文件的方式添加，确保带有material-icons类的元素能正常显示图标。

第二步：完整代码实现 #

<!-- HTML结构 -->
<p id="onlineoffline">
  <span class="material-icons" id="status-icon">signal_wifi_connected_no_internet_4</span>
</p>

<!-- 可选CSS：调整图标样式 -->
<style>
  .material-icons {
    font-size: 48px;
    color: #666;
  }
  .online {
    color: #4CAF50; /* 在线时用绿色标注 */
  }
  .offline {
    color: #F44336; /* 离线时用红色标注 */
  }
</style>

<!-- JavaScript逻辑 -->
<script>
  // 获取图标元素
  const statusIcon = document.getElementById('status-icon');

  // 定义更新状态的函数
  function updateOnlineStatus() {
    if (navigator.onLine) {
      // 在线状态：切换图标和样式
      statusIcon.textContent = 'signal_wifi_4_bar';
      statusIcon.className = 'material-icons online';
    } else {
      // 离线状态：切换图标和样式
      statusIcon.textContent = 'signal_wifi_connected_no_internet_4';
      statusIcon.className = 'material-icons offline';
    }
  }

  // 页面加载完成后初始化状态
  window.addEventListener('DOMContentLoaded', updateOnlineStatus);

  // 监听网络状态变化事件
  window.addEventListener('online', updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
</script>

关键细节说明 #

• navigator.onLine属性：这个属性返回布尔值，true表示浏览器当前能连接到网络，false表示离线。需要注意的是，它只能检测浏览器的网络连接状态，无法判断网络是否能正常访问特定站点（比如网络通但目标服务器不可达时，它仍会显示在线）。
• 事件监听：通过绑定online和offline事件，能在用户网络状态发生变化时自动触发图标更新，不需要用户手动刷新页面。
• 图标自定义：我这里选用了signal_wifi_4_bar作为在线图标、signal_wifi_connected_no_internet_4作为离线图标，你可以根据自己的喜好换成其他Material Icons，比如在线用cloud、离线用cloud_off，只需要修改textContent里的图标名称即可。
• 样式优化：添加了颜色样式让状态更直观，你可以根据页面整体风格调整字体大小、颜色等样式参数。

这样就能实现动态的在线/离线状态检测，并用Material Icons直观展示啦！

内容的提问来源于stack exchange，提问作者canary