最近在做一个需求，遇到了一个问题，html页面中引入一堆js，导致html页面代码看起来特别不美观，于是想着如何把所有的js引入到一个js内，然后只在html页面引入一个js，这样页面看起来就简洁多了，于是就做了如下的内容：

在shuilangyizu.js中引入多个其他js的代码：

var script1=document.createElement(\'script\');//创建script标签节点
script1.setAttribute(\'type\',\'text/javascript\');//设置script类型
script1.setAttribute(\'src\',\'http://pv.sohu.com/cityjson?ie=utf-8\');//设置js地址
document.body.appendChild(script1);//将js追加为body的子标签

//判断script1是否加载成功
script1.onload=script1.onreadystatechange=function(){
//如果script1加载成功则创建script2引入，这样就不会由于后面的js依赖前面的js导致后面的js先加载而导致程序报错
if(!this.readyState||this.readyState==\'loaded\'||this.readyState==\'complete\'){
        var script2=document.createElement(\'script\');
        script2.setAttribute(\'type\',\'text/javascript\');
        script2.setAttribute(\'src\',\'http://www.shuilangyizu.top/js/jquery-2.1.4.js\');
        document.body.appendChild(script2);
        
        script2.onload=script2.onreadystatechange=function(){
            if(!this.readyState||this.readyState==\'loaded\'||this.readyState==\'complete\'){
                var script3=document.createElement(\'script\');
                script3.setAttribute(\'type\',\'text/javascript\');
                script3.setAttribute(\'src\',\'http://www.shuilangyizu.top/js/clipboard.min.js\');
                document.body.appendChild(script3);
                
                script3.onload=script3.onreadystatechange=function(){
                    if(!this.readyState||this.readyState==\'loaded\'||this.readyState==\'complete\'){
                        var script4=document.createElement(\'script\');
                        script4.setAttribute(\'type\',\'text/javascript\');
                        script4.setAttribute(\'src\',\'http://www.shuilangyizu.top/js/jquery-weui.js\');
                        document.body.appendChild(script4);
                        
                        script4.onload=script4.onreadystatechange=function(){
                            if(!this.readyState||this.readyState==\'loaded\'||this.readyState==\'complete\'){
                                var script5=document.createElement(\'script\');
                                script5.setAttribute(\'type\',\'text/javascript\');
                                script5.setAttribute(\'src\',\'http://www.shuilangyizu.top/js/wechat.js\');
                                document.body.appendChild(script5);
                            }
                        }
                    }
                }
            }
        }
    }
}

 

 

然后将shuilangyizu.js引入html页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中引入多个js测试</title>
</head>
<body ontouchstart>
    <div align="center" style="margin-top: 50px;">
        <span class="ceshi">ceshi</span>
    </div> 
<script type="text/javascript" src="http://www.shuilangyizu.top/js/shuilangyizu.js"></script>
</body>
</html>

这样就成功了!!!

版权声明：本文为shuilangyizu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/shuilangyizu/p/12525082.html