脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS加载样式

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

您可能感兴趣的文章:

相关文章

  • javascript 广告移动特效的实现代码

    javascript 广告移动特效的实现代码

    下面小编就为大家带来一篇javascript 广告移动特效的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 利用Axios实现无感知双Token刷新的详细教程

    利用Axios实现无感知双Token刷新的详细教程

    在现代系统中,Token认证已成为保障用户安全的标准做法,然而,尽管许多系统采用了这种认证方式,却在处理Token刷新方面存在不足,导致用户体验不佳,许多系统未能提供一种无缝的、用户无感知的Token刷新机制,所以本文介绍了教你用Axios实现无感知双Token刷新
    2024-08-08
  • 与iframe进行跨域交互的解决方案(推荐)

    与iframe进行跨域交互的解决方案(推荐)

    这篇文章主要介绍了与iframe进行跨域交互的解决方案,本文通过实例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-03-03
  • 深度解析TypeScript装饰器

    深度解析TypeScript装饰器

    TypeScript 是一种强类型的超集 JavaScript,它为开发者提供了静态类型检查、代码提示以及更好的可维护性,本文将深入解析 TypeScript 装饰器,从基础概念到高级用法,逐步探讨其作用、原理以及实际应用场景,以帮助你更好地理解和利用这一功能,需要的朋友可以参考下
    2023-09-09
  • 深入探究JavaScript中for循环的效率问题及相关优化

    深入探究JavaScript中for循环的效率问题及相关优化

    这篇文章主要介绍了JavaScript中for循环的效率问题及相关优化,文中谈到了Underscore.js库及循环在各个浏览器js解释器下的表现,需要的朋友可以参考下
    2016-03-03
  • Bootstrap实现水平排列的表单

    Bootstrap实现水平排列的表单

    这篇文章主要为大家详细介绍了Bootstrap实现水平排列的表单的相关代码，代码简洁，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 解决AJAX中跨域访问出现''没有权限''的错误

    解决AJAX中跨域访问出现''没有权限''的错误

    很多人在使用AJAX调用别人站点内容的时候,JS会提示"没有权限"错误，这是XMLHTTP组件的限制-安全起见
    2008-08-08
  • javascript操作数组详解

    javascript操作数组详解

    这篇文章主要详细介绍了javascript操作数组的方法以及示例,需要的朋友可以参考下
    2014-12-12
  • 重构Javascript代码示例(重构前后对比)

    重构Javascript代码示例(重构前后对比)

    回顾头来看看那些Javascript脚本，有写得不太理想，过于复杂。现抽取出来，重构它们,想学习javascript重构的朋友可以参考下啊，网本文可以帮助你的
    2013-01-01
  • javascript字符串拆分成单个字符相加和不超过10，求最终值

    javascript字符串拆分成单个字符相加和不超过10，求最终值

    javascript字符串拆分成单个字符相加和不超过10，求最终值
    2008-09-09

最新评论