动态加载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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
js+canvas绘制图形验证码
Sep 21 Javascript
原生js实现照片墙效果
Oct 13 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
解析php中call_user_func_array的作用
2013/06/07 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
python读写LMDB文件的方法
2018/07/02 Python
python实现多进程代码示例
2018/10/31 Python
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
什么是servlet
2012/05/08 面试题
中专毕业生自我鉴定范文
2013/11/09 职场文书
最新党员思想汇报
2014/01/01 职场文书
水电站项目建议书
2014/05/12 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书