在低版本的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. sql server性能分析--执行sql次数和逻辑次数

    目前在做一个项目优化时,想通过数据库层分析sql server系统性能,查了一下网上代码,修改了一下标题和DMVs代码,以下代码可以用来分析系统运行一段时间后,那些语句是系统忙的sql语句.做为参考. ...

  2. eclipse中copy qualified name使用方式

    转载自:原文:https://blog.csdn.net/love20yh/article/details/81328202 copy qualified name得到的结果可以有2类: 1./use ...

  3. 爬虫入门之urllib库(一)

    1 爬虫概述 (1)互联网爬虫 一个程序,根据Url进行爬取网页,获取有用信息 (2)核心任务 爬取网页 解析数据 难点 :爬虫和反爬虫之间的博弈 (3)爬虫语言 php 多进程和多线程支持不好 ja ...

  4. Codeforces Round #375 (Div. 2) D. Lakes in Berland (DFS或并查集)

    D. Lakes in Berland time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  5. csu 1965

    Description You are a boss who has N employers. One day, you have a message and you want to tell it ...

  6. thinkphp 实现移动端和PC端显示不同的模板

    1.首先在项目模块下的Common文件夹内建立function.php文件,这样就可以首先执行这里的函数了.所以在这里判断是否是移动端访问的,判断方法如下: function ismobile() { ...

  7. 关于layui问题

    编辑: $('#Teacher').find('option').each(function(){ $(this).attr('selected',$(this).val()==data.tid); ...

  8. ASP.NET整体运行机制+asp.net请求管道+页面生命周期

  9. 【luogu P3807 卢卡斯定理】 模板

    题目链接:https://www.luogu.org/problemnew/show/P3807 Lucas定理用来求大组合数对一个质数取模的值,不大于10^5用逆元,大于10^5就用Lucas转化成 ...

  10. Android 滑动效果汇总

    Android 滑动效果入门篇(一)—— ViewFlipper Android 滑动效果入门篇(二)—— Gallery Android 滑动效果基础篇(三)—— Gallery仿图像集浏览 And ...