JS实现动态加载样式和脚本
更新时间：2023年09月12日 08:19:37 作者：编程三昧
在前端开发的过程中,不可避免的需要根据前置条件动态加载样式和脚本文件,本文小编就来简单为大家介绍一下实现一下动态加载样式和脚本文件的方法吧
在前端开发的过程中，不可避免的需要根据前置条件动态加载样式和脚本文件，今天我们来简单的实现一下动态加载样式和脚本文件的方法。
动态加载样式文件
使用以下脚本可实现页面CSS文件的动态加载。
function loadStyle(url) {
try {
document.createStyleSheet(url);
} catch (e) {
var cssLink = document.createElement("link");
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
cssLink.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(cssLink);
}
}动态加载脚本文件
function appendscript(src, text, reload, charset) {
var id = hash(src + text);
if (!reload && in_array(id, evalscripts)) return;
if (reload && $(id)) {
$(id).parentNode.removeChild($(id));
}
evalscripts.push(id);
var scriptNode = document.createElement("script");
scriptNode.type = "text/javascript";
scriptNode.id = id;
scriptNode.charset = charset
? charset
: BROWSER.firefox
? document.characterSet
: document.charset;
try {
if (src) {
scriptNode.src = src;
scriptNode.onloadDone = false;
scriptNode.onload = function() {
scriptNode.onloadDone = true;
JSLOADED[src] = 1;
};
scriptNode.onreadystatechange = function() {
if (
(scriptNode.readyState == "loaded" ||
scriptNode.readyState == "complete") &&
!scriptNode.onloadDone
) {
scriptNode.onloadDone = true;
JSLOADED[src] = 1;
}
};
} else if (text) {
scriptNode.text = text;
}
document.getElementsByTagName("head")[0].appendChild(scriptNode);
} catch (e) {}
}
function appendscript(src, text, reload, charset) {
var id = hash(src + text);
if (!reload && in_array(id, evalscripts)) return;
if (reload && $(id)) {
$(id).parentNode.removeChild($(id));
}
evalscripts.push(id);
var scriptNode = document.createElement("script");
scriptNode.type = "text/javascript";
scriptNode.id = id;
scriptNode.charset = charset
? charset
: BROWSER.firefox
? document.characterSet
: document.charset;
try {
if (src) {
scriptNode.src = src;
scriptNode.onloadDone = false;
scriptNode.onload = function() {
scriptNode.onloadDone = true;
JSLOADED[src] = 1;
};
scriptNode.onreadystatechange = function() {
if (
(scriptNode.readyState == "loaded" ||
scriptNode.readyState == "complete") &&
!scriptNode.onloadDone
) {
scriptNode.onloadDone = true;
JSLOADED[src] = 1;
}
};
} else if (text) {
scriptNode.text = text;
}
document.getElementsByTagName("head")[0].appendChild(scriptNode);
} catch (e) {}
}总结
可以看到，所谓的动态加载其实就是通过JS方法创建文件的引用标签，给标签添加上文件路径后，再使用DOM方法动态地追加至HTML页面。
到此这篇关于JS实现动态加载样式和脚本的文章就介绍到这了,更多相关JS加载样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解webpack+express多页站点开发2017-12-12
Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js,在实际开发中,有时候需要取消已经发起的请求,下面小编就和大家简单聊聊Axios的请求取消机制吧2025-11-11
调试Javascript代码(浏览器F12及VS中debugger关键字)
目前，常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能下面我就介绍如何在浏览器/VS中调试我们的JS代码,感兴趣的你可不要走开啊，希望本文对你有所帮助2013-01-01
这篇文章主要为大家详细介绍了js实现放大镜效果的思路与代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
js类型转换与引用类型详解(Boolean_Number_String)
本篇文章主要是对js中的类型转换与引用类型(Boolean_Number_String)进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
JavaScript获取图片像素颜色并转换为box-shadow显示
这篇文章主要介绍了JavaScript获取图片像素颜色并转换为box-shadow显示的方法,用到了HTML5中的FileReader API和getImageData,转换为的CSS3 box-shadow也要注意浏览器的兼容问题,需要的朋友可以参考下2016-03-03
这篇文章主要给大家介绍了关于前端如何实现对本地文件IO操作的相关资料,需要的朋友可以参考下2024-07-07
这篇文章主要介为大家详细绍了Bootstrap CSS布局之表单的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了JavaScript递归算法生成树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
微信小程序必须通过官方的微信开发者工具进行开发,每一个页面都至少由两部分组成 .wxml,.js,也有可能会有 .wxss,这篇文章主要介绍了微信小程序开发之WXML、WXSS与JS的相关资料,需要的朋友可以参考下2026-01-01
最新评论