雅荷心语
心之所向便是光

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作
关注本站
- 微信
- 微博
- 腾讯微博
- Twitter
- Facebook
- RSS订阅

Hi, 请登录我要注册找回密码

在H5网页里判断是否在Wifi环境

2018-03-08 分类：前端之旅阅读(13177) 评论(0)

之前一直以为H5网页里肯定是无法判断网络环境的, 但是查了一下, 发现其实html5已结有了新的东西去判断,但是兼容性很差!

经过测试发现, 如果实在微信浏览器中, 高版本的微信内置浏览器, 直接在UA里面就能看到网络状态!

我们简单写了一个页面弹出当前的Ua,发现!

这里的NetType/WIFI 就是当前的网络状态了. 切换到4G, 重新进入页面, 就是4G!!

注意这里是重新进入页面, 而不是直接在当前页面切换到4G然后刷新,

因为经过简单测试, 直接切换到4G,刷新页面, 弹出来的Ua是不会变化的, 还是之前的Ua!

如果换其他浏览器, 比如 UC, QQ浏览器等等,那就直接可以用 window.navigator.connection 来判断了!

最终版本就是:

function isWifi() {
        try {
            let wifi = true
            let ua = window.navigator.userAgent
            let con = window.navigator.connection
            // 如果是微信
            if (/MicroMessenger/.test(ua)) {
                if (ua.indexOf('WIFI') >= 0) {
                    return true;
                }else{
                    wifi = false
                }
                // 如果支持navigator.connection
            } else if (con) {
                let network = con.type
                if (network !== 'wifi' && network !== '2' && network !== 'unknown') {
                    wifi = false
                }
            }
            return wifi
        } catch (e) {
            return false
        }
    }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

function isWifi() {

try {

let wifi = true

let ua = window.navigator.userAgent

let con = window.navigator.connection

// 如果是微信

if (/MicroMessenger/.test(ua)) {

if (ua.indexOf('WIFI') >= 0) {

return true;

}else{

wifi = false

}

// 如果支持navigator.connection

} else if (con) {

let network = con.type

if (network !== 'wifi' && network !== '2' && network !== 'unknown') {

wifi = false

}

return wifi

} catch (e) {

return false

}

分享到：更多 ()

碎碎念):(来自公众号)

左邻右舍

Brian's Blog
易水寒
楼教主
贤心
阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

2024年11月
一	二	三	四	五	六	日
« 十
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

相关推荐

雅荷心语博客 -心之所向便是光