leo_logic

【浏览器兼容】JS判断法
今天,做一个网页练习,发现浏览器兼容问题在之前的学习中忽略了,于是查阅资料js可以判断访问网页的浏览器是哪个,于是...
扫描右侧二维码阅读全文
24
2018/09

【浏览器兼容】JS判断法

今天,做一个网页练习,发现浏览器兼容问题在之前的学习中忽略了,于是查阅资料js可以判断访问网页的浏览器是哪个,于是结合if-else语句写了下,折腾了半天的问题终于解决啦!目前来看js判断法去兼容是全能的,就是针对每个浏览器都去写太麻烦啦!


2018/9/24更新
手机测试发现,在QQ或微信排除拦截的情况没有显示CSS样式
初步怀疑是JS没有启用
解决办法:
初步:①暂时在HTML中引入一种样式,但js判断方式引入样式会失效
递进:②在判断浏览器的js代码中(如下代码就是)在添加样式的前面添加:

/*该段代码会清除①步在HTML中添加的css引用代码*/
document.getElementById("beforeCSS").style.cssText = ""; 
/*注意这儿使用的事ID选择器*/ 

function getBrowser() {  
    var ua = window.navigator.userAgent;  
    var isIE = window.ActiveXObject != undefined && ua.indexOf("MSIE") != -1; 
    var isEdge = ua.indexOf("Edge") > -1;   /*判断是否Edge浏览器*/
    var isFirefox = ua.indexOf("Firefox") != -1;  
    var isOpera = window.opr != undefined;  
    var isChrome = ua.indexOf("Chrome") && window.chrome;  
    var isSafari = ua.indexOf("Safari") != -1 && ua.indexOf("Version") != -1;  
    if (isIE) {  
        return "IE";  
    }else if (isEdge) {
        return "Edge";  
    }else if (isFirefox) {
        return "Firefox";  
    } else if (isOpera) {  
        return "Opera";  
    } else if (isChrome) {  
        return "Chrome";  
    } else if (isSafari) {  
        return "Safari";  
    } else {  
        return "Unkown";  
    }  
}
var linkNode = document.createElement("link"),scriptNode = document.createElement("script");
linkNode.setAttribute("rel","stylesheet");
linkNode.setAttribute("type","text/css");
scriptNode.setAttribute("type", "text/javascript");
 
/*可以在此处添加清除HTML中引用样式*/

if(getBrowser()=="Chrome"){
    linkNode.setAttribute("href","css/register_page_pc.css");
}else if(getBrowser()=="IE"){
    linkNode.setAttribute("href","css/register_page_pc_ie.css");
}else if(getBrowser()=="Edge"){
    linkNode.setAttribute("href","css/register_page_pc_ie.css");
}else if(getBrowser()=="Unkown"){
    linkNode.setAttribute("href","css/register_page_pc_ie.css");
}
document.head.appendChild(linkNode);
document.head.appendChild(scriptNode);
Last modification:October 21st, 2018 at 02:01 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment