动态加载js文件默认为异步请求的问题解决

最新推荐文章于 2022-07-20 19:23:17 发布

zhifeng687

最新推荐文章于 2022-07-20 19:23:17 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_26222859/article/details/51729677

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

有时候我们需要根据参数不同来引入不同的js文件，用html直接写标签满足不了我们的需求，总结几种方法，以及同步异步加载的各种需求。
一.直接加载

<head>
<script src="../js/jquery1.11.js"></script>
</head>

二、动态创建script元素

<script> 
var oHead = document.getElementsByTagName('HEAD').item(0); 
var oScript= document.createElement("script"); 
oScript.type = "text/javascript"; 
oScript.src="test.js"; 
oHead.appendChild( oScript); 
</script>

上面的方法都是异步执行的，也就是说，在加载这些脚本的同时，主页面的脚本继续运行，如果用以上的方法，那下面的代码将不一定得到预期的效果。
test.js

function test(){	
	alert("测试");
}
var str="测试"

test.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


</body>
<script> 
var oHead = document.getElementsByTagName('HEAD').item(0); 
var oScript= document.createElement("script"); 
oScript.type = "text/javascript"; 
oScript.src="./js/test.js"; 
oHead.appendChild( oScript); 
test();
alert(str);




</script> 
</html>

报错：
Uncaught ReferenceError: test is not defined at test1.html:16

或者定义test1.js去使用test.js的方法和变量，2个js文件都是动态加载，如果test1.js文件先返回，也会报错
test1.js

test()
alert(str)

test.html

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


</body>
<script> 
var oHead = document.getElementsByTagName('HEAD').item(0); 
var oScript= document.createElement("script"); 
oScript.type = "text/javascript"; 
oScript.src="./js/test.js"; 
oHead.appendChild( oScript); 


var oScript1= document.createElement("script"); 
oScript1.type = "text/javascript"; 
oScript1.src="./js/test1.js"; 
oHead.appendChild( oScript1);




</script> 
</html>

当test1.js文件先返回时

test.js请求用了3.1s, test1.js只用了4ms, test1.js先返回

然后就会报错：

Uncaught ReferenceError: test is not defined at test1.js:1

如果通过打断点的方式去调试代码，我们也可以发现

这2行代码是连续执行的

oHead.appendChild( oScript); 


var oScript1= document.createElement("script");

并不会在走完第一行代码后，会走test.js的代码。

三、同步加载js文件

	var Skip={};
		//获取XMLHttpRequest对象(提供客户端同http服务器通讯的协议)
		Skip.getXmlHttpRequest=function (){ 
		     if ( window.XMLHttpRequest ) // 除了IE外的其它浏览器
		           return new XMLHttpRequest() ; 
		     else if ( window.ActiveXObject ) // IE 
		           return new ActiveXObject("MsXml2.XmlHttp") ; 
		},
		//导入内容
		Skip.includeJsText =function (rootObject,jsText){ 
		     if ( rootObject != null ){ 
		         var oScript = document.createElement( "script" );
		         oScript.type = "text/javascript"; 
		         oScript.text = jsText; 
		         rootObject.appendChild(oScript); 		
		     } 
		 }
		
		//同步加载
		Skip.addJs=function(rootObject, url){ 
		    var oXmlHttp = Skip.getXmlHttpRequest() ; 
		   //1.True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应,并且在open()方法当中有调用到onreadystatechange()这个方法。
		   //通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码,它表示服务器返回响应后才执行send()后面的方法.
		   //2.同步执行oXmlHttp.send()方法后oXmlHttp.responseText有返回对应的内容,而异步还是为空,只有在oXmlHttp.readyState == 4时才有内容,反正同步的在oXmlHttp.send()后的操作就相当于oXmlHttp.readyState == 4下的操作,它相当于只有了这一种状态.
		   oXmlHttp.open('GET', url, false); //url为js文件时,ie会自动生成 '<script src="*.js" type="text/javascript"> </scr ipt>',ff不会 
		   oXmlHttp.send(null); 
		   Skip.includeJsText(rootObject,oXmlHttp.responseText);
		};

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
<script> 
var Skip={};
//获取XMLHttpRequest对象(提供客户端同http服务器通讯的协议)
Skip.getXmlHttpRequest=function (){ 
     if ( window.XMLHttpRequest ) // 除了IE外的其它浏览器
           return new XMLHttpRequest() ; 
     else if ( window.ActiveXObject ) // IE 
           return new ActiveXObject("MsXml2.XmlHttp") ; 
},
//导入内容
Skip.includeJsText =function (rootObject,jsText){ 
     if ( rootObject != null ){ 
         var oScript = document.createElement( "script" );
         oScript.type = "text/javascript"; 
         oScript.text = jsText; 
         rootObject.appendChild(oScript); 		
     } 
 }

//同步加载
Skip.addJs=function(rootObject, url){ 
    var oXmlHttp = Skip.getXmlHttpRequest() ; 
   //1.True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应,并且在open()方法当中有调用到onreadystatechange()这个方法。
   //通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码,它表示服务器返回响应后才执行send()后面的方法.
   //2.同步执行oXmlHttp.send()方法后oXmlHttp.responseText有返回对应的内容,而异步还是为空,只有在oXmlHttp.readyState == 4时才有内容,反正同步的在oXmlHttp.send()后的操作就相当于oXmlHttp.readyState == 4下的操作,它相当于只有了这一种状态.
   oXmlHttp.open('GET', url, false); //url为js文件时,ie会自动生成 '<script src="*.js" type="text/javascript"> </scr ipt>',ff不会 
   oXmlHttp.send(null); 
   Skip.includeJsText(rootObject,oXmlHttp.responseText);
};

Skip.addJs(document.head, "./js/test.js");
Skip.addJs(document.head, "./js/test1.js");

</script> 
</html>

或者用jquery实现同步加载：

//ajax同步加载js
	function syncLoadJs(rootObject, url){
		$.ajax({
		    url:url,
		    async:false,
		    dataType:"text",
		    success:function(data){
		    	 var oScript = document.createElement( "script" );
		         oScript.type = "text/javascript"; 
		         oScript.text = data; 
		         rootObject.appendChild(oScript); 
		    }
		});
	}