let MiniSite = new Object();
/**
* 判断浏览器
*/
MiniSite.Browser = {
ie: /msie/.test(window.navigator.userAgent.toLowerCase()),
moz: /gecko/.test(window.navigator.userAgent.toLowerCase()),
opera: /opera/.test(window.navigator.userAgent.toLowerCase()),
safari: /safari/.test(window.navigator.userAgent.toLowerCase())
};
/**
* 加载外部的文件
* @param sUrl 要加载的文件的url地址
* @param fileType 要加载的文件的类型
* @fCallback 文件加载完成之后的处理函数
*/
MiniSite.JsLoader = function(sUrl, fileType, fCallback) {
let fileHref;
if (fileType == "js") {
fileHref = document.createElement('script');
fileHref.setAttribute("type", "text/javascript");
fileHref.setAttribute("src", sUrl);
} else if (fileType == "css") {
fileHref = document.createElement('link');
fileHref.setAttribute("rel", "stylesheet");
fileHref.setAttribute("type", "text/css");
fileHref.setAttribute("href", sUrl);
}
if (fileHref !== undefined) {
document.getElementsByTagName("head")[0].appendChild(fileHref);
if (MiniSite.Browser.ie) {
fileHref.onreadystatechange = function() {
if (this.readyState == 'loaded' || this.readyState == 'complete') {
if (fCallback != undefined) {
fCallback();
}
}
};
} else {
fileHref.onload = function() {
if (fCallback != undefined) {
fCallback();
}
};
}
}
}; //动态加载 CSS 文件
MiniSite.JsLoader("/static/css/all.css", "css");
MiniSite.JsLoader("/static/css/base.css", "css");
MiniSite.JsLoader("/static/css/style.css", "css");
//动态加载 JS 文件
MiniSite.JsLoader("https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js", "js", function() {
MiniSite.JsLoader("https://cdn.jsdelivr.net/npm/vue", "js");
MiniSite.JsLoader("/static/js/bootstrap.min.js", "js");
MiniSite.JsLoader("/static/js/bootstrap-table.min.js", "js", function() {
MiniSite.JsLoader("https://cdn.bootcss.com/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js", "js");
MiniSite.JsLoader("/static/js/tableExport.min.js", "js");
MiniSite.JsLoader("https://cdn.bootcss.com/bootstrap-table/1.12.1/extensions/export/bootstrap-table-export.min.js", "js");
});
MiniSite.JsLoader("https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js", "js");
MiniSite.JsLoader("/static/js/common.js", "js");
});

使用js加载器动态加载外部js、css文件的更多相关文章

  1. JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件

    今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 M ...

  2. 使用js加载器动态加载外部Javascript文件

    原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...

  3. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  4. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  5. 动态库DLL加载方式-静态加载和动态加载

    静态加载: 如果你有a.dll和a.lib,两个文件都有的话可以用静态加载的方式: message函数的声明你应该知道吧,把它的声明和下面的语句写到一个头文件中 #pragma comment(lib ...

  6. JAVA反射机制--静态加载与动态加载

    Java反射是Java被视为动态(或准动态)语言的一个关键性质.这个机制允许程序在运行时透过Reflection APIs取得任何一个已知名称的class的内部信息,包括其modifiers(诸如pu ...

  7. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  8. js与jquery的动态加载脚本文件

    jquery动态加载 jQuery.getScript(url,[callback]) js动态加载 function loadJs(name) { document.write('<scrip ...

  9. js实现滚动条来动态加载数据

    主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...

随机推荐

  1. springAop Schedule,注解annotation 实现任务监控

    我们有很多定时任务在任务工程中执行,但是如果我们不加以监控,很有可能定时任务死掉或者卡住我们都不知道. 所以需要做一个任务监控.监控任务当前执行的状态. 还是那样,先让定时任务启动起来,当前我们使用的 ...

  2. Vue引入非npm的js库

    Vue引入非npm的js库 Vue项目有时候需要一些没有export的js库,不能通过import引入,那么使用方法如下 1.可以在index.html页面使用script标签引入,当然也可以使用cd ...

  3. python自动华 (十六)

    Python自动化 [第十六篇]:JavaScript作用域和Dom收尾 本节内容: javascript作用域 DOM收尾 JavaScript作用域 JavaScript的作用域一直以来是前端开发 ...

  4. jQuery 操作一览表

    js获取方法要比jq的方法麻烦的多,主要是因为FF浏览器,因为FF浏览器也会把换行当作dom元素,下面跟着小编一起来学习js jquery获取当前元素的兄弟级 上一个 下一个元素的,需要的朋友一起来学 ...

  5. 安装包设计-------安装(QT)---------知识总结

    1.判断文件是否存在 QFile file(path): file.exists(); 2.复制文件 bool copy(const QString &fileName, const QStr ...

  6. gitlab高可用模式

    高可用模式 企业版 社区版 我们这里说一下成本比较低的主备模式,它主要依赖的是DRBD方式进行数据同步,需要2台ALL IN ONE的GitLab服务器,也就是通过上面安装方式把所有组件都安装在一起的 ...

  7. AngularJS开发中常用的写法,如:获取URL参数、路由跳转、$http、获取元素等

    控制器,带状态 app.controller('editCtrl', ['$http', '$location', '$rootScope', '$scope', '$state', '$stateP ...

  8. [Oracle]察看一张表的约束 和 察看一张表的索引

    --察看一张表的约束select table_name,constraint_name,constraint_type from user_constraints where table_name=u ...

  9. SQL-W3School-高级:SQL 数据类型

    ylbtech-SQL-W3School-高级:SQL 数据类型 1.返回顶部 1. Microsoft Access.MySQL 以及 SQL Server 所使用的数据类型和范围. Microso ...

  10. TransitionDrawable

    ayerDrawable的一个子类,TransitionDrawable只管理两层的Drawable!两层!两层! 并且提供了透明度变化的动画,可以控制一层Drawable过度到另一层Drawable ...