JS动态加载样式和脚本

在前端开发的过程中,不可避免的需要根据前置条件动态加载样式和脚本文件,今天我们来简单的实现一下动态加载样式和脚本文件的方法。

动态加载样式文件

使用以下脚本可实现页面CSS文件的动态加载。

JavaScript 复制代码
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);
  }
}

动态加载脚本文件

JavaScript 复制代码
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页面。

相关推荐
JarvanMo9 分钟前
Dart & Flutter DevTools 扩展
前端
yuko093111 分钟前
【手机验证码】手机号格式化光标异常问题
前端
原生高钙12 分钟前
高性能前端埋点上报系统的架构与实现
前端·面试
水痕0117 分钟前
nginx一个域名下部署多套前端项目
运维·前端·nginx
Anyin20 分钟前
Spring AI Alibaba - DeepResearch 前端主体 UI 构建
前端·ai编程·trae
非优秀程序员20 分钟前
8 个提升开发者效率的小众 AI 项目
前端·人工智能·后端
河畔一角28 分钟前
一些感悟
前端
excel34 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端
前端小巷子1 小时前
Webpack 5模块联邦
前端·javascript·面试
玲小珑1 小时前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js