动态加载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 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
Javascript 解疑
Nov 11 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
基于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下删除一篇文章生成的多个静态页面
2010/08/08 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
python中count函数简单的实例讲解
2020/02/06 Python
对python中各个response的使用说明
2020/03/28 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
行政办公员自我评价分享
2013/12/14 职场文书
语文教育专业求职信
2014/06/28 职场文书
2015年入党决心书
2015/02/05 职场文书
出国留学英文自荐信
2015/03/25 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python