判断不同浏览器，加载不同的css和js文件

最新推荐文章于 2021-01-22 15:31:25 发布

原创最新推荐文章于 2021-01-22 15:31:25 发布 · 4.6k 阅读

4 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何根据浏览器类型来决定加载不同的CSS和JavaScript文件。在IE9及以上版本，条件注释已失效，因此提出了通过检测浏览器特性来动态创建并插入link和script标签的解决方案。对于IE浏览器，引入了polyfill.js和browser.js，而其他非IE浏览器则不需这些文件，Vue的脚本类型也相应调整。

在低版本的IE中，条件注释还有效果，但是在ie9，10，11浏览器中，条件注释不起作用。

在网上找了个校验ie的方法。

function isIE(){
  if (window.ActiveXObject || "ActiveXObject" in window){
    alert('is ie')
  }else{
    alert(not ie')
  }
}

isIE()

IE下才有这个对象ActiveXObject

当然我们也可以根据浏览器是否为IE，引入不同的js和css文件。

这里网上有个例子。

var linkNode = document.createElement("link"),scriptNode = document.createElement("script");  
linkNode.setAttribute("rel","stylesheet");  
linkNode.setAttribute("type","text/css");  
scriptNode.setAttribute("type", "text/javascript");  

if(getBrowser()=="IE"){  
    linkNode.setAttribute("href","css/index-ie.css");  
    scriptNode.setAttribute("src", "js/index-ie.js");  
}else if(getBrowser()=="Firefox"){  
    linkNode.setAttribute("href","css/index-firefox.css");  
    scriptNode.setAttribute("src", "js/index-firefox.js");  
}else if(getBrowser()=="Opera"){  
    linkNode.setAttribute("href","css/index-opera.css");  
    scriptNode.setAttribute("src", "js/index-opera.js");  
}else if(getBrowser()=="Chrome"){  
    linkNode.setAttribute("href","css/index-chrome.css");  
    scriptNode.setAttribute("src", "js/index-chrome.js");  
}else if(getBrowser()=="Safari"){  
    linkNode.setAttribute("href","css/index-safari.css");  
    scriptNode.setAttribute("src", "js/index-safari.js");  
}  
document.head.appendChild(linkNode);  
document.head.appendChild(scriptNode);

即先生成link和script标签，给类型，再根据浏览器的不同给出不同的路径

是ie就引入polyfill.js和browser.js，并且vue的script标签类型为text/babel,非IE浏览器下，不需要引入polyfill.js和browser.js，vue的script标签类型为text/javascript，即最传统的类型。

function isIE(src){
  var polyfill = document.createElement("script");
  var browser = document.createElement("script");
  var myVuejs = document.createElement("script");
  polyfill.setAttribute("src", "../../js/bootshop/js/polyfill.js");
  browser.setAttribute("src", "../../js/bootshop/js/browser.min.js");
  myVuejs.setAttribute("src", src);

  if (window.ActiveXObject || "ActiveXObject" in window){
    myVuejs.setAttribute("type", "text/babel");
    document.head.appendChild(polyfill);
    document.head.appendChild(browser);
    document.head.appendChild(myVuejs);
  }else{
    document.head.appendChild(myVuejs);
  }
}