JavaScript动态导入JS与CSS静态资源的方法
作者:竹影时间:2026-10-29 12:37:21浏览:540
本文介绍了一种JavaScript动态导入JS与CSS等静态资源文件的方法。通过封装$import函数,根据资源类型自动创建script或link标签插入head,支持加载完成回调,并具备防止重复加载的ID检查机制,适用于前端动态加载场景。
JavaScript动态导入静态资源实现
本文介绍了利用JavaScript动态导入JS、CSS等静态资源文件的具体实现方案,供读者参考。
/**
* 动态导入静态资源文件js/css
*/
var $import = function(){
return function(rId, res, callback){
if(res && 'string' == typeof res){
if(rId){
if($($('#' + rId), $('head')).length>0){
return;
}
}
//加载资源文件
var sType = res.substring(res.lastIndexOf('.') + 1);
// 支持js/css
if(sType && ('js' == sType || 'css' == sType)){
var isScript = (sType == 'js');
var tag = isScript ? 'script' : 'link';
var head = document.getElementsByTagName('head')[0];
// 创建节点
var linkScript = document.createElement(tag);
linkScript.type = isScript ? 'text/javascript' : 'text/css';
linkScript.charset = 'UTF-8';
if(!isScript){
linkScript.rel = 'stylesheet';
}
isScript ? linkScript.src = res : linkScript.href = res;
if(callback && 'function' == typeof callback){
if (linkScript.addEventListener){
linkScript.addEventListener('load', function(){
callback.call();
}, false);
} else if (linkScript.attachEvent) {
linkScript.attachEvent('onreadystatechange', function(){
var target = window.event.srcElement;
if (target.readyState == 'complete') {
callback.call();
}
});
}
}
head.appendChild(linkScript);
}
}
};
}();
希望上述内容对JavaScript程序设计有所帮助。
作者最新文章
网页开发三者分工:HTML结构、CSS样式与JavaScript交互怎么协作
2026-11-05 12:51:22
JS解析URL参数时怎么处理中文乱码和特殊字符
2026-11-05 12:47:23
js-cookie 存储 JSON 对象:自动序列化与反序列化技巧
2026-11-05 12:36:26
marked.js 快速上手:安装与基础 Markdown 转 HTML 示例
2026-11-05 09:32:53
Phaser.js 与 PixiJS、Cocos Creator 的技术选型对比
2026-11-05 08:36:30
