`

用javascript动态加载不同css/js文件

 
阅读更多

DynamicLoad.js文件代码如下：


function DynamicLoad()
{
//属性
var Self=this;       //对象自身

//功能：加载指定的文件
//参数：src——需要被加载的文件
//返回：（无）
this.Load=function(src)
{
if(Self.IsLoaded(src))     //判断该文件是否已经加载了
{
    Self.OnLoaded(src);
    return;
}
else        //如果没有加载，动态创建
{
    var objDynamic;     //动态创建的对象
    var type=Self.GetSrcType(src); //文件类型
    if(type=="js" || type=="vbs")
    {
     objDynamic=document.createElement("script");
     objDynamic.src=src;
     if(type=="js")
     {
      objDynamic.type="text/javascript";
      objDynamic.language="javascript";
     }
     else
     {
      objDynamic.type="text/vbscript";
      objDynamic.language="vbscript";
     }
    }
    else if(type=="css")
    {
     objDynamic=document.createElement("link");
     objDynamic.rel="stylesheet";
     objDynamic.type="text/css";
     objDynamic.href=src;
    }
    else
    {
     Self.OnFailed(src);
     return;
    }
    document.getElementsByTagName("head")[0].appendChild(objDynamic); //将创建的对象插入到HEAD节中
    objDynamic.onload=objDynamic.onreadystatechange=function()    //加载过程中状态改变引发的事件
    {   
     //在此函数中this指针指的是s结点对象，而不是JsLoader实例，   
     //所以必须用self来调用onsuccess事件，下同。
     if(this.readyState && this.readyState=="loading")
      return;
     else
       Self.OnLoaded(src);
    };
    objDynamic.onerror=function()             //加载过程中发生错误引发的事件
    {
     document.getElementsByTagName("head")[0].removeChild(objDynamic);
     Self.OnFailed(src);
    };
}
};

//功能：判断是否已经加载了某文件
//参数：src——需要被检查的文件
//返回：返回是否已经加载了该文件
this.IsLoaded=function(src)
{
var isLoaded=false;    //假设没有加载
var type=Self.GetSrcType(src); //得到文件的类型
var i;       //用于循环的索引
if(type=="js" || type=="vbs")
{
    var scripts=document.getElementsByTagName("script"); //得到所有的脚本对象**
    for(i=0;i<scripts.length;i++)        //依次判断每个script对象
    {
     if(scripts[i].src && scripts[i].src.indexOf(src)!=-1)
     {
      if(scripts[i].readyState=="loaded" || scripts[i].readyState=="complete")
      {
       isLoaded=true;
       break;
      }
     }
    }
}
else if(type=="css")
{
    var links=document.getElementsByTagName("link"); //得到所有的link对象**
    for(i=0;i<links.length;i++)         //依次判断每个link对象
    {
     if(links[i].href && links[i].href.indexOf(src)!=-1)
     {
      if(links[i].readyState=="loaded" || links[i].readyState=="complete" || links[i].readyState=="interactive")
      {
       isLoaded=true;
       break;
      }
     }
    }
}
return isLoaded;
};

//功能：得到文件的类型（即扩展名）
//参数：src——文件名
//返回：返回文件的类型
this.GetSrcType=function(src)
{
var type="";
var lastIndex=src.lastIndexOf(".");
if(lastIndex!=-1)
{
    type=src.substr(lastIndex+1);
}
return type;
};

//功能：当文件加载完成时发生的事件
//参数：src——加载完成的文件
//返回：（无）
this.OnLoaded=function(src)
{
Self.LoadedCallback(src);
};

//功能：文件加载完成时执行的回调函数
//参数：src——加载完的文件
//返回：（无）
this.LoadedCallback=function(src){};

//功能：当文件加载过程中发生错误时发生的事件
//参数：src——正在加载的文件
//返回：（无）
this.OnFailed=function(src)
{
Self.FailedCallback(src);
};

//功能：当文件加载失败时执行的回调函数
//参数：src——加载失败的文件
//返回：（无）
this.FailedCallback=function(src){};
}


页面代码：

<html>
<body>
<script language="javascript" type="text/javascript" src="DynamicLoad.js"></script>
<script language="javascript" type="text/javascript">

var dl=new DynamicLoad();
function test1()
{
dl.Load("css.css"); 
}
function test2()
{
dl.Load("Admin_style.css"); 
}
</script>
<input type="button" class="Button" onclick="test2()" value="submit"/><br/>
<input type="button" class="Button" value="button" onclick="test1()"/><br/>
<a href="">aaa</a>
</body>
</html>



注释：

js文件方法本文件包含了一个名为DynamicLoad的类，该类可以为页面动态加载js、vbs和css文件。
属性： Self——对象自身（该属性为设计时使用，程序中请尽量避免使用该属性。）
方法： Load(src)——加载指定的文件。如果加载成功，引发OnLoaded事件；如果加载失败，引发OnFailed事件。您可以通过重载回调函数LoadedCallback和FailedCallback来执行加载对应的操作。
IsLoaded(src)——判断指定的文件是否已经加载完毕。
GetSrcType(src)——得到文件类型（即扩展名）
LoadedCallback(src)——文件加载成功后执行的回调函数。请重载该方法，以处理加载文件成功之后的操作。
FailedCallback(src)——文件加载失败后执行的回调函数。请重载该方法，以处理加载文件失败之后的操作。
事件： OnLoaded(src)——文件加载成功事件。
OnFailed(src)——文件加载失败事件。

/***************************/

var dl=new DynamicLoad();     //初始化DynamicLoad对象
alert(dl.IsLoaded("DynamicLoad.js")); //判断是否已经加载了文件DynamicLoad.js
dl.Load("HttpCookie.js");     //加载HttpCookie.js
alert(dl.IsLoaded("HttpCookie.js")); //判断是否已经加载了文件HttpCookie.js。加载需要时间，一般情况下这里返回false；如果过一小段时间再判断，很可能返回true。

分享到：
| jquery 定义插件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    使用javaScript动态加载Js文件和Css文件

    JS动态加载CSS 在可换主题的界面中具有很重要的意义，用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式，下面详细说明。 希望下面的方法对你有帮助。 （1）使用JavaScript动态加载Js文件 /*JavaScript动态...

    css/js文件模块化组件

    这种方式称为"CSS in JS"，它允许我们在JavaScript中编写和管理CSS，增强了CSS的动态性和模块化。 总的来说，"css/js文件模块化组件"的核心理念是将复杂的项目拆分成可管理和可复用的部分，这有助于提升代码的...

    动态加载Css 浏览器判断

    在提供的压缩包文件中，`Browes 判断.asp`和`Browes 浏览器判断.asp`可能是用于服务器端进行浏览器检测的ASP文件，而`CheckBr(动态加载Css).js`可能是用于客户端JavaScript动态加载CSS并进行浏览器判断的脚本。...

    javascript实现动态加载CSS.docx

    以下将详细解释如何使用JavaScript实现动态加载CSS，并探讨其应用场景和优化策略。 首先，我们来看一个简单的JavaScript函数，用于动态添加CSS链接到页面头部： ```javascript function addStyle(stylePath) { ...

    JS 动态加载js文件和css文件 同步/异步的两种简单方式

    JavaScript动态加载资源文件是指在页面加载完成后，根据需要从服务器动态加载额外的脚本（js文件）或样式表（css文件）。这种方法可以减少初始页面加载时的资源消耗，提高页面的加载速度。动态加载可以通过两种方式...

    网站开发后台css/js/img文件

    在网站开发中，CSS（层叠样式表）、JavaScript和图片（img）是构建动态、交互性和视觉吸引力的网站后台不可或缺的元素。以下是关于这些关键组件的详细解释： **CSS（层叠样式表）** CSS是一种样式语言，用于描述...

    jQury.动态加载css和js文件

    // JavaScript Document ;(function($){ $.extend({ 　includePath: '', 　include: function(file) { 　var files = typeof file == "string" ? [file]:file; 　for (var i = 0; i ; i++) { 　var name = files[i]...

    javascript、css动态加载工具

    javascript、css动态加载工具

    webview 加载js ,css

    下面我们将深入探讨如何在Android的WebView中加载和使用JS、CSS以及它们带来的优势。 1. Android WebView加载HTML Android的WebView可以通过调用`loadData()`或`loadDataWithBaseURL()`方法加载HTML字符串，或者...

    动态加载外部CSS与JS文件

    动态加载CSS和JS文件还可以与其他优化技术结合，如延迟加载（lazy loading）、按需加载（on-demand loading）以及异步加载（async loading），以进一步提高页面性能。同时，需要注意的是，虽然动态加载可以提升用户...

    javascript 动态加载 css 方法总结

    与将CSS文件静态地写死在页面中不同，动态加载CSS允许开发者根据需要在运行时引入额外的样式表，例如，实现按需加载或条件加载等功能。以下总结了一些JavaScript实现动态加载CSS文件的方法。 ### 使用@import加载...

    javascript实现动态导入js与css等静态资源文件的方法.docx

    ### JavaScript 实现动态导入 JS 与 CSS 等静态资源文件的方法 在现代 Web 开发中，动态地加载脚本和样式表是非常常见的需求。这不仅有助于提高网站性能（例如，按需加载资源），还能增强用户体验（例如，在特定...

    如何实现JavaScript动态加载CSS和JS文件

    现在，我们可以使用`dynamicLoading.css("test.css")`和`dynamicLoading.js("test.js")`来分别动态加载CSS和JavaScript文件。 这种方法的一个优点是兼容性好，可以在各种浏览器中正常工作。然而，需要注意的是，...

    JavaScript动态生成css

    使用CSS变量，我们可以用JavaScript动态地改变全局样式。首先在CSS中定义变量： ```css :root { --primary-color: blue; } ``` 然后在JavaScript中修改这些变量： ```javascript document.documentElement.style...

    动静分离案例所需要用的样式（css/js/img）

    例如，你可以将CSS文件放在"static/css"子目录下，JS文件放在"static/js"子目录，而图片文件则放在"static/img"子目录。 对于CSS（层叠样式表），它是用来控制网页布局和样式的语言。在这个案例中，CSS文件可能包含...

    延迟加载JS/CSS

    2. **JavaScript延迟加载**：lazyload.js 文件可能是一个实现延迟加载功能的JavaScript库。它通常通过监听滚动事件来判断元素是否进入视口，一旦进入，就立即加载对应的资源。例如，可以使用Intersection Observer ...

Magicbox
Global site tag (gtag.js) - Google Analytics