在低版本的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);
  }
}

原文:https://blog.csdn.net/cofecode/article/details/80175179

判断不同浏览器,加载不同的css和js文件的更多相关文章

  1. 浏览器加载不上css,样式走丢

    来自:http://www.cnblogs.com/crizygo/p/5466444.html 问题描述:使用eclipse修改样式文件,浏览器的页面一时显示一时不显示,最后直接没有加载最新的css ...

  2. 样式的操作-不同浏览器加载不同的css文件

    ———————————————————— <script type="text/javascript">            //body加载事件监听函数       ...

  3. 用javascript预加载图片、css、js的方法研究

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...

  4. 转载 yii2-按需加载并管理CSS样式/JS脚本

    一.资源包定义 Yii2对于CSS/JS 管理,使用AssetBundle资源包类. 创建如下: backend/assets/AppAsset.php namespace backend\asset ...

  5. Node.js 加载静态资源css,js等不显示问题的解决方法

    一,原因 1,没有响应到css等文件 2,响应类型是由文件的后缀名决定 (1)html的请求头 Content-Type : text/html ; charset=utf-8 (2) CSS的请求头 ...

  6. yii2-按需加载并管理CSS样式/JS脚本

    原文地址:https://segmentfault.com/a/1190000003742452

  7. 使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理

    原文链接: http://www.bubuko.com/infodetail-671521.html

  8. 浏览器加载外部js 的顺序,以及处理顺序。

    问题, 有事候按F12打开 google的调试台后,查看network下面加载过来的资源是, 有些资源的状态处于 pending.. 个人理解: 浏览器是可以同时开启多个http 请求去加载外部的资源 ...

  9. 浏览器加载和渲染html的顺序-css渲染效率的探究

    1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...

随机推荐

  1. 【起航计划 037】2015 起航计划 Android APIDemo的魔鬼步伐 36 App->Service->Remote Service Binding AIDL实现不同进程间调用服务接口 kill 进程

    本例和下个例子Remote Service Controller 涉及到的文件有RemoteService.java ,IRemoteService.aidl, IRemoteServiceCallb ...

  2. CSS样式编写案例

    1.制作如图三角形效果: 步骤一:将右侧盒子设置为相对定位 步骤二:在右侧盒子里面新建个子盒子,设置宽高相等,为正方形,绝对定位 步骤三:将绝对定位的盒子用CSS3旋转属性旋转 2.制定如图的序列号 ...

  3. spring---FactoryBean与BeanFactory的区别

    1.BeanFactory BeanFactory是IOC最基本的容器,负责生产和管理bean,它为其他具体的IOC容器提供了最基本的规范,例如DefaultListableBeanFactory, ...

  4. GridView的分页代码

    1.前台代码 <PagerTemplate><div style="text-align:center; color:Blue"> <asp:Link ...

  5. Laravel 生成小程序图文海报最佳方案之一

    目前已经更新 2.0 版本,支持生成的海报关联Model,支持是否重新生成海报等功能,具体更新请移步 github: laravel-miniprogram-poster 微信小程序官方并未提供分享到 ...

  6. python3的学习经验

    网上资料非常多,颇有些“乱花渐欲迷人眼”的意味,个人看了不少,拖之前从事前端的福,发现廖雪峰大神的网站里有.学了2天之后发觉获益良多,网址:https://www.liaoxuefeng.com/wi ...

  7. sql相同记录取时间最大的信息

  8. May 09th 2017 Week 19th Tuesday

    Everything you see exists together in a delicate balance. 世上所有的生命都在微妙的平衡中生存. A delicate balance? Can ...

  9. [原]Android打包之Eclipse打包

    Android自动打包流程详细图: 步骤一: 在工程中新建一个build.xml. 步骤二: 给工程配置ant工具. 选择ant工具的步骤如下: Windows->Shown view-> ...

  10. Python爬虫利器之Beautiful Soup,Requests,正则的用法(转)

    https://cuiqingcai.com/1319.html https://cuiqingcai.com/2556.html https://cuiqingcai.com/977.html