• js中引入其他js的方法


    最近在做一个需求,遇到了一个问题,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>

    这样就成功了!!!

  • 相关阅读:
    一天一个算法:将一个数组中的值按逆序输出
    一天一个算法:求俩个数的最大公约数和最小公倍数
    一天一个算法:给出年、月、日,计算该日是该年的第几天
    一天一个算法:递归计算函数
    一天一个算法:冒泡排序算法
    一天一个算法:猴子吃桃问题
    一天一个算法:求Sn=a+aa+aaa+…+aa…a之和
    一天一个算法:完数
    一天一个算法:水仙花数
    一天一个算法:前言
  • 原文地址:https://www.cnblogs.com/shuilangyizu/p/12525082.html
Copyright © 2020-2023  润新知