动态加载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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
brook javascript框架介绍
Oct 10 Javascript
javascript内存管理详细解析
Nov 11 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
js表单登陆验证示例
Oct 19 Javascript
深入理解vue路由的使用
Mar 24 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 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 分页类 扩展代码
2009/06/11 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
PHP7修改的函数
2021/03/09 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
200行python代码实现2048游戏
2019/07/17 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
酒店经理职责
2014/01/30 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
营销计划书范文
2015/01/17 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers