动态加载js、css的实例代码


Posted in Javascript onMay 26, 2016

一、原生js:

/**
* 加载js和css文件
* @param jsonData.path 前缀路径
* @param jsonData.url 需要加载的js路径或css路径
* @param jsonData.type 需要加载的类型 js或css
*/
function loadWriteFiles(jsonData)
{
jsonData.path = jsonData.path != undefined ? jsonData.path : "";
if(jsonData.type == "js")
{
document.writeln("<script type='text/javascript' src='"+ jsonData.path + jsonData.url+"'></script>");
}
else if(jsonData.type == "css")
{
document.writeln("<link rel='stylesheet' href='"+jsonData.path + jsonData.url+"' type='text/css' />");
}
}
/**
* 加载js或css到head中
* @param jsonData.path 前缀路径
* @param jsonData.url 需要加载的js路径或css路径
* @param jsonData.type 需要加载的类型 js或css
*/
function loadFilesToHead(jsonData)
{
jsonData.path = jsonData.path != undefined ? jsonData.path : "";
if(jsonData.type == "js")
{
var _js = document.createElement("script");
_js.setAttribute("type", "text/javascript");
_js.setAttribute("src", jsonData.path + jsonData.url);
_js.onload = _js.onreadystatechange=function(){ 
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ 
if("function" == typeof(jsonData["callback"]) && jsonData["callback"]){
jsonData["callback"].call(this);
}
} 
_js.onload=_js.onreadystatechange=null; 
} 
document.getElementsByTagName("head")[].appendChild(_js);//追加到head标签内
}
else if(jsonData.type == "css")
{
var _css = document.createElement("link");
_js.setAttribute("type", "text/css");
_css.setAttribute("rel", "stylesheet");
_css.setAttribute("href", jsonData.path + jsonData.url);
document.getElementsByTagName("head")[].appendChild(_css);//追加到head标签内
}
}

二、jquery版本:

采用deferred对象返回结果

var uiLoad = uiLoad || {};
(function($, $document, uiLoad) {
"use strict";
var loaded = [],
promise = false,
deferred = $.Deferred();
uiLoad.load = function (srcs) {
srcs = $.isArray(srcs) ? srcs : srcs.split(/\s+/);
if(!promise){
promise = deferred.promise();
}
$.each(srcs, function(index, src) {
promise = promise.then( function(){
return src.indexOf('.css') >= ? loadCSS(src) : loadScript(src);
} );
});
deferred.resolve();
return promise;
};
var loadScript = function (src) {
if(loaded[src]) return loaded[src].promise();
var deferred = $.Deferred();
var script = $document.createElement('script');
script.src = src;
script.onload = function (e) {
deferred.resolve(e);
};
script.onerror = function (e) {
deferred.reject(e);
};
$document.body.appendChild(script);
loaded[src] = deferred;
return deferred.promise();
};
var loadCSS = function (href) {
if(loaded[href]) return loaded[href].promise();
var deferred = $.Deferred();
var style = $document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = href;
style.onload = function (e) {
deferred.resolve(e);
};
style.onerror = function (e) {
deferred.reject(e);
};
$document.head.appendChild(style);
loaded[href] = deferred;
return deferred.promise();
}
})(jQuery, document, uiLoad);

以上所述是小编给大家介绍的动态加载js、css的实例代码,希望对大家有所帮助!

Javascript 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
redux-saga 初识和使用
Mar 10 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 #Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 #Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 #Javascript
jquery分隔Url的param方法(推荐)
May 25 #Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 #Javascript
使用jquery提交form表单并自定义action的方法
May 25 #Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 #Javascript
You might like
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
javascript动态加载实现方法一
2012/08/22 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
JS中多层次排序算法的实现代码
2021/01/06 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
Python中实现参数类型检查的简单方法
2015/04/21 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
儿科主治医生个人求职信
2013/09/23 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
保护校园环境倡议书
2015/04/28 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang