如何通过index.html获取当前网络类型：HTML5 Network Info API-html教程-PHP中文网

network information api 在 chrome 中返回 undefined 是因为该 api 仅在安全上下文（如 https、localhost 或 http://127.0.0.1）中可用，http 或 file:// 协议下不可用；需检查 'connection' in navigator 并通过 conn.onchange 监听变化，而非 addeventlistener。

如何通过index.html获取当前网络类型：html5 network info api

Network Information API 在 Chrome 中为何返回 undefined

直接在 index.html 里调用 navigator.connection 得到 undefined，不是你代码写错了，而是该 API 仅在安全上下文（secure context）中可用。HTTP 协议下完全不可用，即使本地双击打开 file:// 协议也会被浏览器拒绝暴露接口。

必须满足以下任一条件才能访问：
- 页面通过 https:// 加载
- 页面运行在 localhost（Chrome/Firefox 支持，Edge 需 v116+）
- 使用 http://127.0.0.1（部分旧版 Firefox 要求此形式而非 localhost）

如何正确读取 effectiveType 和 downlink

navigator.connection 提供的是只读实时快照，不是事件流。它不自动更新，需手动轮询或监听变更事件。常用字段有：effectiveType（'slow-2g'、'2g'、'3g'、'4g'）、downlink（Mbps，如 10 表示约 10 Mbps）、rtt（毫秒）。

典型用法示例：

if ('connection' in navigator) {
  const { effectiveType, downlink } = navigator.connection;
  console.log('网络类型:', effectiveType); // '4g'
  console.log('估算带宽:', downlink);     // 12.5
}

注意：downlink 是估算值，受系统策略影响，Android Chrome 可能返回 0 或四舍五入为整数；iOS Safari 完全不支持该 API。

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

监听网络变化要用 onchange，不是 addEventListener

navigator.connection 对象的变更事件只能通过 onchange 属性绑定，不能用 addEventListener('change', ...) —— 这是该 API 的特殊设计，后者不会触发。

正确写法：

if ('connection' in navigator) {
  const conn = navigator.connection;
  conn.onchange = () => {
    console.log('网络已切换为:', conn.effectiveType);
  };
}

常见误操作：
- 绑定后立即读取 conn.effectiveType，但此时可能尚未初始化（尤其在页面加载初期）
- 忘记检查 'connection' in navigator，导致 Safari 或旧版 Chrome 报 TypeError
- 在非 secure context 下尝试监听，conn.onchange 赋值成功但永远不会被调用