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加载样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

如何阻止复制剪切和粘贴事件为了表单内容的安全
提交表单内容如（密码）重要信息时，为了安全，需要阻止一些复制剪切和粘贴事件，下面与大家分享一个实例，感兴趣的朋友可以参考下哈
2013-05-05
js获取html文件的思路及示例
html文件如何获取，有很多朋友对此表示疑问，在本文将为大家介绍下使用js的或许方法，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-09-09
手机端点击图片放大特效PhotoSwipe.js插件实现
这篇文章主要为大家详细介绍了手机端点击图片放大特效PhotoSwipe.js插件实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
Moment.js 不容错过的超棒Javascript日期处理类库
moment.js是一个轻量级并且健壮的js日期处理类库，相信大家在javascript开发过程中，都自己动手写过，或者使用google和百度搜索过相关的实现函数
2012-04-04
JavaScript享元模式原理与用法实例详解
这篇文章主要介绍了JavaScript享元模式原理与用法,结合实例形式总结分析了JavaScript享元模式基本概念、原理、用法及操作注意事项,需要的朋友可以参考下
2020-03-03
微信小程序实现手风琴折叠面板
这篇文章主要为大家详细介绍了微信小程序实现手风琴折叠面板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
JS的replace方法介绍
replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下，每个匹配都调用该函数，它返回的字符串将作为替换文本使用
2012-10-10
js 获取计算后的样式写法及注意事项
复合样式：currentStyle;注意在获取复合样式时要单独写,不能写background,接下来将详细介绍下实现方法，感兴趣的你可不要错过了哈
2013-02-02
详解如何探测小程序返回到webview页面
这篇文章主要介绍了详解如何探测小程序返回到webview页面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
javascript设计模式 – 单例模式原理与应用实例分析
这篇文章主要介绍了javascript设计模式 – 单例模式原理与应用,结合实例形式分析了javascript单例模式原理、定义、应用场景及相关操作注意事项,需要的朋友可以参考下
2020-04-04