动态引入js文件 & 动态引入css文件（升级版）

最新推荐文章于 2024-05-09 10:39:03 发布

百小容是程序员

最新推荐文章于 2024-05-09 10:39:03 发布

阅读量711

点赞数

分类专栏： js & jquery 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/VIP_CR/article/details/125084485

版权

js & jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

动态引入js文件&css文件

- - - 调用示例
    - 公用方法
=====================================================================

下面示例，实测，效果好用，推荐大家

调用示例

var fileUrl ="http://192.168.1.10:80";

//动态引入css文件
ajaxPage("srcB", fileUrl + "/demo.css","css");
//动态引入js文件
ajaxPage("srcA", fileUrl + "/test.js","js");

公用方法

//动态引入JS && 动态引入CSS
//sId:引入名称（全局唯一）
//url地址：文件引用地址
//type类型：js（js文件）、cs（css文件）
function ajaxPage(sId, url,type) {
    var oXmlHttp = GetHttpRequest();
    oXmlHttp.onreadystatechange = function () {
        if (oXmlHttp.readyState == 4) {
            if(type=="js"){
                includeJS(sId, url, oXmlHttp.responseText);
            }
            else if(type=="css"){
                includeCSS(sId, url);
            }
            
        }
    }
    oXmlHttp.open('GET', url, false);//同步操作 
    oXmlHttp.send(null);
}

function GetHttpRequest() {
    if (window.XMLHttpRequest) // Gecko 
        return new XMLHttpRequest();
    else if (window.ActiveXObject) // IE 
        return new ActiveXObject("MsXml2.XmlHttp");
}


//引入js
function includeJS(sId, fileUrl, source) {
    if ((source != null) && (!document.getElementById(sId))) {
        var oHead = document.getElementsByTagName('HEAD').item(0);
        var oScript = document.createElement("script");
        oScript.type = "text/javascript";
        oScript.id = sId;
        oScript.text = source;
        oHead.appendChild(oScript);
    }
}
//引入CSS
function includeCSS(sId, fileUrl, source) {
    if ((fileUrl != null) && (!document.getElementById(sId))) {
        var oHead = document.getElementsByTagName('HEAD').item(0);
        var link = document.createElement("link");
        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = fileUrl;
        oHead.appendChild(link);
    }
}

=====================================================================

下面代码的原文连接：https://www.jb51.net/article/139504.htm

index.html

<html> 
 <head> 
 <meta content="text/html;charset=utf-8" http-equiv="content-type"> 
 <title> </title> 
 <script src='' id="s1"></script> 
 <script src="dynamic.js"></script> 
 </head> 
 <body> 
 </body> 
</html>

test.js

alert("hello! I am test.js"); 
var str="1";

dynamic.js

//第一种方式：直接document.write 但这样会把当前的页面全覆写掉 
//document.write("<script src='test.js'><\/script>"); 
  
//第二种方式:动态改变已有script的src属性 
//s1.src="test.js" 
  
//第三种方式：动态创建script元素 
/* var oHead = document.getElementsByTagName('HEAD').item(0); 
 var oScript= document.createElement("script"); 
 oScript.type = "text/javascript"; 
 oScript.src="test.js"; 
 oHead.appendChild(oScript); 
*/
//其实原理就是利用dom动态的引入一个js到文件中来~就能和原有的js通信了~ 
//alert(str); 
  
/*以上三种方式都采用异步加载机制，也就是加载过程中，页面会往下走， 
如果这样的话会有问题的,如上面的str就访问不到，因为当程序执行alert(str)时，test.js还在加载Ing.... 
那么第四种就是基于ajax请求的,且是推荐
*/
function GetHttpRequest() 
{ 
 if ( window.XMLHttpRequest ) // Gecko 
 return new XMLHttpRequest() ; 
 else if ( window.ActiveXObject ) // IE 
 return new ActiveXObject("MsXml2.XmlHttp") ; 
} 
  
function ajaxPage(sId, url){ 
 var oXmlHttp = GetHttpRequest() ; 
 oXmlHttp.onreadystatechange = function() 
 { 
 if (oXmlHttp.readyState == 4) 
 { 
 includeJS( sId, url, oXmlHttp.responseText ); 
 } 
 } 
 oXmlHttp.open('GET', url, false);//同步操作 
 oXmlHttp.send(null); 
} 
  
function includeJS(sId, fileUrl, source) 
{ 
 if ( ( source != null ) && ( !document.getElementById( sId ) ) ){ 
 var oHead = document.getElementsByTagName('HEAD').item(0); 
 var oScript = document.createElement( "script" ); 
 oScript.type = "text/javascript"; 
 oScript.id = sId; 
 oScript.text = source; 
 oHead.appendChild( oScript ); 
 } 
} 
ajaxPage( "scrA", "test.js" ); 
alert( "主页面动态加载JS脚本。"); 
alert( "主页面动态加载a.js并取其中的变量：" + str );