javascript动态加载js文件主流浏览器兼容版

时间:2021-02-14 16:48:51

一、代码示例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>动态加载JS文件</title>
</head>
<body>
<button id="btn" onclick="loanScript('test.js'),callback">加载js文件</button>
<script type="text/javascript"> function callback(){
console.log("script load complete");
loadSuccess();
}
function loanScript(url,callbackFun){
var script = document.createElement("script");
script.type = "text/javascript";
//兼容IE浏览器
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callbackFun();
}
}
}else{//其他浏览器
script.onload = function(){
callbackFun();
}; } script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
</script>
</body>
</html>

注意除了Firefox和Opera保证脚本文件按照代码顺序加载,其他浏览器不保证文件按照你指定的顺序加载,可通过串联操作保证文件的加载次序代码如下

window.onload=function(){
loadScript("file1.js",function(){
loadScript("file2.js",function(){
loadScript("file3.js",function(){
alert("all js document are loaded");
});
});
}); }