JS判断UA动态加载CSS的方法

项目进度差不多到了调试兼容性的阶段，这时候就会发现移动前端在兼容性方面下的功夫一点也不少于PC端。当初需要兼容低版本IE时还有条件注释可用，现在则只能自己用Javascript去判断了。

由于苹果的强硬政策（不允许第三方浏览器调用浏览器自身的内核而只允许他们调用iOS的Webkit内核以及使用Webkit JavaScript），而Windows Phone上的IE/Edge十分贴心地进行了反向兼容，也不需要我们费太多心思，因此讨论前端兼容性时我们主要针对整体较为开放的Android平台。

因此为了省事减少代码量，我们在这里只针对Android系统上的浏览器作出判断。

var UACheck, isAndroid, ua;
UACheck = /(HuaWei|HW|HTC|UCWeb|UCBrowser|Chrome|OPR)/g; 
//这只是写几个浏览器作为示例，实际上吗……（手动再见
isAndroid = (/android|Android/).test(navigator.userAgent);
ua = navigator.userAgent.match(UACheck);

//接下来创建link标签，根据获取到的UA等信息决定link标签的属性即可：
if (isAndroid && ua != null) {
    var style  = document.createElment('link');
    style.setAttribute('type', 'text/css');
    style.setAttribute('rel', 'stylesheet');
    switch (ua[0]) {
    case 'HW':
    case 'HuaWei':
        style.setAttribute('href', 'hwStyle.css');
        style.setAttribute('media', '媒体查询')；
        //如果有必要，在这一步再对设备进行判断，比如设备分辨率、方向什么的
        style.id = 'HWstyle';
        //进行判断，看head里是否已经存在该标签
        if(!document.getElementById('HWstyle'))
            document.getElementsByTagName('head')[0].appendChild(style);
        }
        break;
        //其他同理
    }

    //重点来了！前方高能！
    style.onload = function(){
        style.disabled = true;
        style.disabled = false;
    }
    //别问我这是干什么
    //我只知道引用的CSS文档在link标签被创建并插入head标签之后不会立即生效
    //必须要这样折腾一下
    //link标签中引用的CSS文档才会被加入资源列表
    //CSS文档中的内容才会被加入到document.styleSheets里面
    //至于原理
    //我也想知道
}

现在问题来了，到底为什么link标签插入head标签中之后必须要disable掉再enable一下呢？？？

如果有路过的大神请指教（逃

转载于:https://www.cnblogs.com/Emily36107/p/5269177.html